CSS Image Hover Overlay Fade In Text

Please Share On:

Definition:

To display the overlay text on mouse hover, let’s start to design your code from the beginning.

First of all, create a container and put an image inside that container, create an overlay and put text inside it like the below example.

Fade In Text

Now, let’s start designing.

<!DOCTYPE html>
<html>
  <head>
 
  </head>
  
  <body> 
      <h3 class="title">Fade In Overlay</h3> 
      <div class = "container">
          <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Fade In Overlay">
        
        <div class="overlay">
    		<div class="text">Fade In Overlay</div>
  		</div>
      </div>   
   
  </body>
</html>

Output:

Now, style your container and image. Make sure you keep your container position relative and container width will be your design requirement. Here, I have given 50%. You can give 10%, 20%, 100%, or your chosen position.

.container {
         position: relative;
         width: 50%;
      }

Now, we need to design images. Add the below code to your style sheet.

img {
        display:block;
        width: 100%;
        height: auto;
      }

Output:

Your output looks like this.

Now, it’s time to design your overlay. The overlay must be the same size as your image and in an absolute position. Here, I have added an overlay background color in light blue. Now, add the below code to your style sheet.

.overlay {
        position: absolute;
        height:100%;
        width:100%;
        background-color: lightblue;
	  }

Output:

Your output looks like this:

Now, I want my overlay text to stay absolute behind my image. To do this, add the below code in your above .overlay style sheet.

top: 0;
bottom: 0;
left: 0;
right: 0;

The code looks like this

.overlay {
        position: absolute;
        height:100%;
        width:100%;
        background-color: lightblue;
        top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	  }

Output:

Now, see the output after adding the above code.

Here, you can clearly see that the overlay text has covered your image which is supposed to stay in the background and the image should be seen in the front. To display your image, keep the overlay opacity to 0 before the mouse hover.

opacity: 0;

Add the opacity in your .overlay and also add a transition for overlay

transition: .5s ease;

Output:

Here is an output after you add opacity zero in your overlay text.

Now, it is time to style the mouse hover effect and display overlay text. When we hover a mouse on the image, the image must disappear, and overlay text should display. To do this, apply overlay opacity to 1.

.container:hover .overlay {
        opacity: 1;
}

Output:

Now, let’s design the text and keep it in the center. Add the below code to keep your text in the center

.text{
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
      }

Output:

See an overlay text at the center:

Output:

Try it yourself

Donate to support writers.

You may be interested in the following topics:

Post Views: 2,539

CSS Image Hover Overlay Fade In Text

Definition:

Output:

Output:

Output:

Output:

Output:

Output:

Output:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.