Image caption hover effect using HTML and CSS

First, let me explain — what is the Image caption hover effect, whenever the visitor hovers over the image, we can see content slowly popping over the image.

let’s start creating Image caption hover effect step by step

Consider the div element with id:wrapper and within that consider a div element with class:image-container inside the wrapper div and put the image and one more div element with class:image-caption, h1 and p elements.

<div id="wrapper">
  <div class="image-container">
    <img src="img1.jpg" />
    <div class="image-caption">
      <h1>coding is love</h1>
      <p>para description about this picture.</p>
    </div>
  </div>
</div>

Check out the youtube video on Image caption hover effect

1. Add the CSS to wrapper div and give the margin:auto; to make the content float within the center of the browser. and give overflow:hidden; to make the rest of the content lie within the given height.

   #wrapper{
               padding:0px;
               width:820px;
               height:auto;
               margin:auto;
               overflow:hidden;
   }

2. Add the CSS to image-container div and give the position:relative; and float:left; to make the images align to left.

   .image-container{
               float:left;
               width:250px;
               height:200px;
               position:relative;
               margin:10px;
               cursor:pointer;
   }
   

3. Add the CSS to image by giving same width and height of image-container div and position:absolute; to overlap the image-caption content on top of the image.

   .image-container img{
               width:250px;
               height:200px; 
               position:absolute;
   }
   

4. Add the CSS to image-caption div and give height and width(100%) and position:absolute; to make the image caption content lies exactly on top of the image and make opacity:0; to hide content.
5. Add the CSS3 transition property for the effect transition:all 300ms ease-in-out and add the cross browser compatibility to make sure that the transition effect works across all the browsers.

   .image-caption {
               width:100%;
               height:100%;
               background:rgba(0, 0, 0, 0.7);
               position:absolute; 
               opacity:0; 
               transition:all 300ms ease-in-out;
              -webkit-transition:all 300ms ease-in-out;
              -moz-transition:all 300ms ease-in-out;
              -o-transition:all 300ms ease-in-out;
              -ms-transition:all 300ms ease-in-out;
   }
   

6. Add the google font family Indie Flower and Overpass Mono for good font effect.
7. Add the CSS to the h1,p elements and give the opacity:1; ( .image-container:hover .image-caption) to make the content visible. whenever the mouse pointer is hovered on the images.

   .image-caption h1{
               padding:45px 0px 5px 0px;
               text-align:center;
               margin-left:-15px;
               text-transform:uppercase;
               font-family: 'Indie Flower', cursive;
               font-size:25px;
               color:#00bfb6;
   }
   
   .image-caption p{
               text-align:center; 
               font-family: 'Overpass Mono', monospace;
               color:#fff;
   }
   
   .image-container:hover .image-caption{
               opacity:1;
   }
   

See the Pen Image caption hover effect using HTML and CSS by rajeshdn (@cool_lazyboy) on CodePen.0

Final notes…

Here, In this article, I was shown just the basics of the Image caption hover effect and feel free to check out my next article, where I had shown — how to create the different kinds of Image hover caption sliding effects.