CSS Image Hover Overlay Fade In A Box

Please Share On:

Definition:

To display the overlay fade in a box on mouse hover, we begin to design the code from the beginning.

Our task here is, first of all, we create a container and put an image inside that container, create an overlay, and put text inside it. When we hover over the image the image should fade out 50% and the text should fade in 100% and display in a box. Initially, the text should be invisible and visible only on mouse hover on the image as below example.

Fade In A Box

First, create a simple <html> code.

<!DOCTYPE html>
<html>
  <head>
 
  </head>
  
   <body> 
      <h3 class="title">Fade In A Box</h3> 
      <div class = "container">
          <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="CSS Image Hover Fade In A Box" class="image">
        
        <div class="overlay-box">
    		<div class="text">Fade In A Box</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 requirements. 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 the image with an opacity defined 1. The opacity will only change on the mouse. Initial opacity will remain 1 which means your image shows in full transparency. Add the below code to your style sheet.

.image {
        display:block;
        width: 100%;
        height: auto;
        opacity: 1;
        transition: .5s ease;
      }

Output:

Your output still looks like the same as before.

Now, it’s time to design your overlay. The overlay must be the same size as your image and in an absolute position and at the center of the image. Now, add the below code to your style sheet.

.overlay-box {
        position: absolute;     
      
        /*the below code brings your overlay to center*/
        top: 50%;
        left: 50%;
  	transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%)      
	  }

Output:

Your output looks like this:

Now I want my overlay text is invisible at first and visible only on mouse hover. So, one way you can do it by applying opacity. Put opacity 0 at the beginning and change the opacity to 1 upon mouse hover. Add the below line to your above code.

opacity:0;

Now, your code looks like this

.overlay-box {
        position: absolute;     
        opacity:0;
        top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%)      
	  }

Here is an output after putting opacity 0:

Now, it’s time to change the image and text opacity. Initially, we defined image opacity as 1. Now change to 0 upon the mouse hovering over an image. And, text opacity was defined as 0, now changed to 1 upon mouse hover.

Add the below code to your CSS style sheets.

.container:hover .image {
 		 opacity: 0.5;
	   }
      
      .container:hover .overlay-box
      {
        opacity: 1;
 	  }

Output:

Now, see the output after adding the above code.

Fade In A Box

Now, it’s time to design your text and give more professional look. Add the below code for your text design:

.text{       
        background-color: #008000;
        color: white;
        font-size: 14px;
        padding: 10px 15px;  
      }

See the output now:

Fade In A Box

Try it yourself

Donate to support writers.

You may be interested in the following topics:

Post Views: 2,689

CSS Image Hover Overlay Fade In A Box

Definition:

Output:

Output:

Output:

Output:

Fade In A Box

Fade In A Box

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.