Add Animated Image Captions on Hover with CSS3 (No Javascript)

We have been using Javascripts to add animated captions on hover for images before this. But, inspired by Wibiya’s toolbar Smart Share for post images, I managed to create almost the same effect using CSS3 without using any Javascripts. This effect can be used by both WordPress and Blogger users. The transition effect of the caption only visible in Webkit browser like Google Chrome.

Vineyard Lane, Spring
This shot was taken by Patrick Smith in Napa Valley California.

Image credits to Patrick Smith Photography

For Blogger Users

1. Go to ‘Edit HTML‘ and search for ]]></b:skin> tag using CTRL + L.

2. Add the following CSS code, immediately before the ]]></b:skin> tag and ‘Save‘.

/* Post images with CSS animated captions by Blogger Bits */

#post-image {
}

#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}

#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}

#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}

#figure:hover .caption {
margin-bottom:0px;
}

#post-image .caption {
width:100%;
height:90px;
padding:10px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}

#post-image .caption b {
text-shadow: 0px 2px 0px #000;
}
#post-image .caption {
color: #ddd;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}

3. To apply this effect to your images in the post, add the following code to your Post Editor in HTML mode. Replace the ‘#‘ with your image source URL.

<div id="post-image">
 <div id='figure'>
 <img src="#"/>
 <span class='caption'>
 <b>Image Title here</b>
 Image description goes here.
 </span>
 </div>
</div>

For WordPress Users

Go to Appearance > Editor > Stylesheet (style.css). Copy and paste the same CSS code and ‘Save’. To apply this effect to your images in the post, add the same code shown in instructions for Blogger users into your Post Editor in HTML mode.

That’s all. If you have any questions or problem, please do not ‘think twice’ to contact me via form or comments.