CSS Image Caption

HI, Today i am going to show you about image captions. we seen in many web sites captions with images, to make this kind of animations no need to use any kind of javascript or jquery, we can do this using css3 in modern days. the caption give an information about images, and we will show the captions while mouse hover the image, this lesson will explain you how to add a simple captions having nice looking effects to stick with your images.

HTML

the html structure shows you, we need to insert one image inside the DIV and take on more div to keep the image caption in same div, give a .image class name to DIV and .caption class name to caption DIV

<ul>
    <li>
      <div class="image">
      <img src="flower-desktop-wallpaper-640x400.jpg"/> 
    <div class="caption">
    White Flowers
    </div>
   </div>
    </li>
        
        
    <li>
        
    <div class="image1">
          <div class="caption1">
    White Flowers
    </div>
       <img src="happy-girl-in-spring.jpg"/>
          
    </div>
    </li>
    
     <li>
        
    <div class="image2">
         <div class="caption2">
    Wallpaper
    </div>
       <img src="HD-Wallpapers-For-Background-8.jpg"/></div>
    </li>
    
    
     <li>
        
    <div class="image3">
         <div class="caption3">
    My Pet
    </div>
       <img src="Maltese-Puppy-Wallpaper-640x400.jpg"/></div>
    </li>
    
    </ul>

CSS

write the css to .image class, make sure write the overflow:hidden to this class the advantage of this the caption div or any other content will be hide, and set the div position to absolute to both .image and .caption classes, now it is time to show the caption on mouse over the image, write the transitions properties to .image:hover .caption{} like this, we can show the caption to every image and we can display the caption from all positions.

.image{
 cursor:pointer;
 overflow:hidden;
 position:absolute;
 border:solid #CCC 5px;
 height: 250px;
 width: 300px;
}


.caption {
 width:100%;
 height:18px;
 background-color: rgba(0,0,0,0.5);
 padding:10px;
 position: absolute;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out; 
  transition: all 0.5s ease-out;

}

.image:hover .caption {
 -moz-transform: translateY(-100%);
 -o-transform: translateY(-100%);
 -webkit-transform: translateY(-100%);
 transform: translateY(-100%);
}


/*image 1*/

.image1{
 cursor:pointer;
 overflow:hidden;
 position:absolute;
 border:solid #CCC 5px;
 height: 250px;
 width: 300px;
}


.caption1{
 width:100%;
 height:18px;
 background-color: rgba(0,0,0,0.5);
 padding:10px;
 position: absolute;
 top:-38px;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out; 
  transition: all 0.5s ease-out;

}

.image1:hover .caption1 {
 -moz-transform: translateY(100%);
 -o-transform: translateY(100%);
 -webkit-transform: translateY(100%);
 transform: translateY(100%);
}


/*image 2*/

.image2{
 cursor:pointer;
 overflow:hidden;
 position:absolute;
 border:solid #CCC 5px;
 height: 250px;
 width: 300px;
}


.caption2{
 width:93%;
 height:100%;
 background-color: rgba(0,0,0,0.80);
 padding:10px;
 position: absolute;
 right:-100%;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out; 
  transition: all 0.5s ease-out;

}

.image2:hover .caption2{
 -moz-transform: translateX(-100%);
 -o-transform: translateX(-100%);
 -webkit-transform: translateX(-100%);
 transform: translateX(-100%);
 
}

/*image 3*/

.image3{
 cursor:pointer;
 overflow:hidden;
 position:absolute;
 border:solid #CCC 5px;
 height: 250px;
 width: 300px;
}


.caption3{
 width:93%;
 height:100%;
 background-color: rgba(0,0,0,0.80);
 padding:10px;
 position: absolute;
 left:-100%;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out; 
  transition: all 0.5s ease-out;

}

.image3:hover .caption3{
 -moz-transform: translateX(100%);
 -o-transform: translateX(100%);
 -webkit-transform: translateX(100%);
 transform: translateX(100%);
}

Live Demo   Download Script