In this blog i am explaining how to create a overlay effect in image with the help of css3 . Overlay effect on image  is an awesome approach to include some decent interactivity to your website.

In image overlay effect when we take our cursor or make hover on the image a overlay or black background comes over the image with some text which show when we click on it , we can see additional information about the image.

Below is the html code of image ovelay effect :-

<div class="row boxing-category mrg-bt-30 boxing-cat-row-1">
              <div class="col-md-6 col-sm-6">
                <div class="boxing-img-1 boxing-bg">
                  <img src="img/category-img-new3.jpg" class="img-responsive">
                  <div class="floating-overlay">
                    <p class="heading text-center">Kick Boxing / Muay Thai</p>                  
                    <div class="overlay"></div>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-sm-6 ">
                <div class="boxing-img-2 boxing-bg">
                  <img src="img/category-img-new2.jpg" class="img-responsive">
                  <div class="floating-overlay">
                    <p class="heading text-center">Jiu Jitsu</p>                  
                    <div class="overlay"></div>
                  </div>
                </div>
              </div>              
 </div>

Below is the css code for image overlay effect :-

.boxing-bg{
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
line-height: 30px;
overflow: hidden;
}
.boxing-bg:hover .floating-overlay{
bottom: 0px;
}
.boxing-category .floating-overlay{
height: 100%;
width: 100%;
position: absolute;
bottom: -100%;
left: 0; 
-webkit-transition: bottom 500ms ease-out 0s; /* Safari */
 transition: bottom 500ms ease-out 0s;}
.boxing-category .overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0,0,0,0.5); 
}
.boxing-category .heading{
position: absolute;
top: 40%;
left: 0px;color:#fff;
z-index: 40;width: 100%;
font-size: 16px
}

Working demo :- you can find  working demo by simply downloading the file which is attached to this blog.