In style.css I added:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 20%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;a
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(231, 231, 231,0.4);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
</body>
</html>And on the page I added:
<div class="container">
<img src="https://imovatec.ch/wp-content/uploads/2017/08/IMG_3574-300x225.jpg" alt="Avatar">
<div class="overlay">
<div class="text">Offerten</div>
</div>
</div>I don’t know a lot about html and css.
]]>In style.css I added:
You just need to add CSS in the style.css file. Even better, don’t edit the themes files but instead use the “Additional CSS” part of the dashboard: https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress
To clarify, HTML is the bits like this:
<html>
<body>
And CSS is the bits like this:
.container {
position: relative;
width: 20%;
}
It’s important to be able to identify the difference between CSS and HTML.
]]><a href="https://imovatec.ch/kontakt">
<div class="image-container">
<img src="https://imovatec.ch/wp-content/uploads/symbole/analyse.svg" alt="alternative"/>
<div class="after">text2</div>
</div>
</a>It seems that this code isn’t correctly. Because by changeing from the text-editor to the view editor, wordpress change the code automatically, and after it doesn’t work anymore. Maybe the link href”” is wrong embedded. Do you see my error?
With the css part I don’t have any problem now.
.image-container {
position: relative;
width: 300px;
height: 225px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
text-align: center;
padding-top: 100px;
font-size: 25px;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
<div class="image-container"><img src="https://imovatec.ch/wp-content/uploads/symbole/analyse.svg" alt="alternative" />
<div class="after">text1</div>
</div>The link <a href="https://imovatec.ch/kontakt"> disappears. That shouldn’t happen if I want to edit the page later in the visual editor.
https://
]]>but when I change the view from text-editor to visual editor, wordpress changes the code.
That’s going to always happen and the simplest way to avoid is not changing between editors. Why do you need to switch between them? Pick one and then press the “Preview” button.
]]>