Adding Image Overlay with CSS

Over the past few weeks, I’ve received a number of emails asking me how to achieve the look that appears when hovering over an image on our css template page. The following tutorial will explain and show you how this can be done.

With this tutorial, you’ll be able to see how to add a layer with opacity over an image when hovering.

We’ll start by looking at the CSS code that will be required:

.box { 
    border:1px solid #ccc;
    padding:5px;
    height:151px;
    width:195px;
}
.overlay {  
    background:rgba(0, 0, 0, .75);
    text-align:center;
    opacity:0;	  
    width:100%;height:100%; 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.box:hover {
    border:1px solid #555;
    border-radius:5px;
}
.box:hover .overlay {
    opacity:1;
}
.search {
    position:relative;
    top:60px;
}

OK, lets break the code down a bit, the first section of code, .box class will define the size of the container our image will be displayed in. Our image in the example is 185px width by 141px height, so therefore we have set the width and height an extra 10px to accommodate the padding of 5px. If needed you can add the image to the background property, but in this example we have added that to our html code, as you’ll see below.

The second section, .overlay class, is where the effect is achieved when we hover over the image. Here we have set the background to black with an opacity of 75%, plus we have set the opacity property to ‘0’ so that when we are not hovering over the image, the overlay will not show. We have also set a few transition effects just to give it a bit of style.

The third section, .box:hover, is rather simple, when we hover over our container, we will change the border color and radius.

The fourth section, .box:hover .overlay, is where we change the opacity back to ‘1’, so now when we hover over the image, our .overlay class can now be seen.

The final section, .search, is just there to position our search icon over the image.

That’s all that is required for the CSS code, below is the HTML code required:

<div class="box" style="background:url(images/83.png) no-repeat 50% 50%;">
  <a href="#"><div class="overlay">
    <span class="search"><img src="images/search.png"></span>
  </div></a>
</div>

The code above is pretty self explanatory, this is where we have set our image to load, positioned in the center of the container.

If you want to check out a demo and play around with it a bit, just click on the button below.

Demo