In this first article in the history of BELIEVEMY, let's see together how to create a hovered effect: text that appears when you hover your mouse over an image!
You can find the entire tutorial on our Instagram account
Step 1
In this first step, we will start by displaying an image:
<img src="logo-believemy.png" alt="Logo" />Step 2
Crop and wrap the image in a div:
<div class="container">
<!-- Image -->
<img src="logo-believemy.png" alt="Logo" />
</div>And on the CSS side:
.container {
position: relative;
width: 500px;
}
.container img {
width: 100%;
}Step 3
Add the text to display:
<div class="container">
<!-- Image -->
<img src="logo-believemy.png" alt="Logo" />
<!-- Text to display -->
<div class="hovered">Hello World!</div>
</div>And on the CSS side:
.hovered {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%; width: 100%;
opacity: 0; transition: all .3s;
background-color: #3f3f44;
}Here, we set the overlay to absolute position to place it correctly and initially hide it by setting its opacity to 0.
The top, bottom, left, and right properties make it take up the entire space.
Step 4
Make the overlay appear when the mouse hovers over the image, and do all this using only CSS.
.container:hover .hovered {
opacity: 1;
}When the mouse hovers over the container class (thus over the image), we set the opacity of our overlay class to 1 to display its content.
Step 5
Center the text of the overlay by wrapping the text in a span tag to better select it with CSS.
<div class="container">
<!-- Image -->
<img src="logo-believemy.png" alt="Logo" />
<!-- Text to display -->
<div class="hovered">
<span>Hello World!</span>
</div>
</div>Finally, we select the span tag within the overlay class and center everything!
.hovered span {
color: white;
font-size: 5rem;
position: absolute;
top: 50%;
left: 50%;
font-family: arial;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}And here we are with a superb hovered effect!
