Create CSS Fade In Overlay on Image Hover

That is the simple tutorial about creating CSS overlay with fade in effect when hover an image. We will use an easy way to create an animated image overlay without any fallback.

The animation like fading in or out can be easily created using CSS3, so we don’t need to go with JavaScript for such a small thing.

The CSS3 provides powerful features and endless possibilities for UX designers, and the great thing about them — They are straightforward and easy to implement.

You don’t need to be an expert in CSS to implement. All you need to know how to place CSS and HTML code.

Few lines of code will give you nice looking fade in transition effect that will make smile to website users.

To make the fade animation, We will take help of overlay techniques. We will place the RBG background color over the image, and it will be active when a user hovers an image.

Let’s see the simple line of the code example.

HTML Structure for Overlay

We will use the figure HTML5 element and add the class captionEffect. To implement the fade in animation, we will use data-effect attribute.

Next, we will place the image inside the figure element.

<figure class="captionEffect" data-effect="fade-in">
  <img src="https://placehold.it/120x90/" alt="">
  <figcaption>
    <h3>Cover Fade</h3>
    <p>Lorem ipsum dolar.</p>
  </figcaption>
</figure>

The figcaption tag used for overlying the transparent background over the picture. Inside the figcaption attribute, we added some heading and text.

CSS for Fade Overlay

Ok, let’s start the CSS coding for fade overlay, we need to do some basic stuff with the main wrapper of the image. Next, we will add the transition to a picture.

.captionEffect {
	position: relative;
	overflow: hidden;
	width: 50%;
	margin: 0 auto;
}
.captionEffect img {
    width: 100%;
    display: block;
    -webkit-transition: 800ms; 
    -o-transition: 800ms; 
    transition: 800ms;
}

Now Let’s add the RGBA background and transition to the figcaption.

.captionEffect figcaption {
	background: rgba(0,0,0,0.8);
	color: white;
	padding: .5rem;
	position: absolute;
	 -webkit-transition: 800ms; 
   -o-transition: 800ms; 
	transition: 800ms;
	width: 100%;
}

Finally, we need to play with data-effect attribute and set opacity zero for the normal position, and on hover, we will adjust the opacity to 1

.captionEffect[data-effect="fade-in"] figcaption {
	top: 0;
	left: 0;
	height: 100%;
	opacity: 0;
}
.captionEffect[data-effect="fade-in"]:hover figcaption {
	opacity: 1;
}
.captionEffect figcaption h2 {
    margin: 0;
    font-size: .875rem;
}
.captionEffect figcaption p {
	margin: 0;
}

You can find download and start customization as per your need. You can easily change the background color and change the text as you want.