Add Image Captions On Hover With CSS3

I'm currently trying out few cool effects with CSS3. You might check out my entry which involves making rounded corners with CSS3 rather than the usual flat straight corners. Here, in this post , we deal with another cool effect namely, displaying the image caption only when you hover your mouse over the image. To check this effect, just hover your mouse over the image below.

Just Another Wildlife Photo
I hope you like the hover effect on this photo. This effect is visible only in the latest browsers - Firefox, Chrome, Safari and Opera, not in Internet Explorer.

Image Credit : Adamhawtin

Are you excited about this trick??? If you are not able to view this effect, it simply means your browser does not support CSS3. I'm pretty sure this trick works on the following browsers - Mozilla Firefox, Chrome, Safari and Opera. Just follow these simple steps to implement this effect on your blog.

1. Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.

2. Search for the following code in your blog. You may use "CTRL+F" to fasten your search results.

]]></b:skin>

3. Now, paste the following piece of code just above the line you searched in step 2.

#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;
}

4. Save your template. That's it.

IMPLEMENTATION IN BLOGGER DRAFT/POST:

I suggest you to use Yahoo! Smush.it before you upload any photo to Picasa Web Album because your images will load faster when you smush them. To get more details about Yahoo Smush.it, check this article - Tips and Tools To Speed Up Your Blog.

Once you upload the image to Picasa Web Albums, copy and paste the URL in a temporary text file. Now, paste the following piece of code in the place where you want the image to appear in your post. That is, shift to the HTML mode in the blogger draft and paste the following piece of code.

<div id="post-image">
<div id='figure'>
<img src="URL OF IMAGE FROM PICASA"/>
<span class='caption'>
<b>YOUR IMAGE TITLE/b>
YOUR IMAGE DESCRIPTION GOES HERE
</span>
</div>
</div>

Replace "URL OF IMAGE FROM PICASA" with the actual URL of your image - the one which you temporarily saved in the text file. Also, change the appropriate text for the title and description of the image. That's all folks. Now, publish your post. You should be able to see the cool CSS effect when you hover the mouse over the image. Share your views via comments. We love to hear from you!!!!

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

Beben said on January 1, 2011 at 8:03 PM :

nice weblog, nice to meet you...
happy new year my friend^^

Mukund said on January 2, 2011 at 7:49 AM :

@Beben: Thanks buddy!! Wish you the same!! Enjoy my other article too!!!

Boris said on January 3, 2011 at 1:56 PM :

wow! this looks interesting. I may not use it today but it will sure come in handy for future use. thanks :)

Mukund said on January 3, 2011 at 5:56 PM :

@Boris: Thanks for the comment buddy! I hope you enjoy other similar hacks on my blog.

Code Matrix said on January 4, 2011 at 10:34 PM :

Nice...... but I would love to see HTML5 in action though. I've checked a few previews but a whole website in action would be a boon for the internet. Youtube has also made a non-flash HTML 5 only player I believe.

Mukund said on January 6, 2011 at 7:18 PM :

@Code Matrix: I'm not sure about Youtube stuff. As far as I went through the net, what you said is right. Anyway, I will try the HTML5 stuff which you said. By the way, thanks for the comment buddy!!

Guillaume

Thanks a lot for this CSS Caption, I gonna use it on my website. It's hard to find caption that doesn't come with a carousel.

Mukund said on January 27, 2011 at 7:01 PM :

@Guillaume: Thanks for the comment! I hope you enjoy the other CSS tricks on my blog as well.

Pundit Commentator said on May 1, 2011 at 10:56 AM :

Cool trick. I'll try it out in the coming week. A friend is helping me customize a new template I just installed.

Mukund said on May 1, 2011 at 11:59 PM :

@Pundit Commentator: Great! I'm glad that you are designing a template. Well, try this hack out and let me know if it was useful to you or not!

Aditya said on June 7, 2011 at 9:10 AM :

NICE WORK.....!!! But one problem.
hey mukund please tell me the html format of blogger like

div dir="ltr" style="text-align: left;" trbidi="on"
div class="separator" style="clear: both; text-align: center;"
a href="#" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"img border="0" src="#" a div
div

PLZ TELL ME WHERE TO ADD CAption.

Mukund said on June 7, 2011 at 10:23 PM :

@Aditya: You need to completely remove those lines and replace them with the code I mentioned in the post. Later add the content and the title of the caption mentioned in the coding. If you have problems, contact me via email. I will help you out. Thanks for the comment buddy!

Adam Hawtin said on July 10, 2011 at 5:30 PM :

This is an interesting article, but I would have appreciated you asking my permission to use my photo as an example (which is copyrighted to me, all rights reserved).

I find it quite disparaging that you have titled it "just another wildlife photo" instead of giving me any credit.

Mukund said on July 10, 2011 at 8:04 PM :

@Adam Hawtin: I'm extremely sorry buddy! These articles were posted a long time back when I never knew about copyrights! I give credits nowadays! I'm sorry! I have included a credit to the photo now! Sorry buddy!

Adam Hawtin said on July 10, 2011 at 11:51 PM :

Thank you for that.

That image is in a lot of places on the internet now, I appreciate that you might have found it somewhere that didn't make it clear who it belonged to or how it was copyrighted.

A credit was all I asked :)

Mukund said on July 10, 2011 at 11:54 PM :

@Adam Hawtin: Well, that's exactly what happened! By the way, I ran through some of your photographs on Flickr! Amazing man! Loved it! Even I capture few snaps (ants, insects, birds) with my Nikon P100 :)

Anonymous

simple and cool one, thank you so much man

Bernard said on October 6, 2011 at 11:37 AM :

Can I paste this Code in Edit Html in Design Tab not in posting?

Mukund said on October 7, 2011 at 12:18 AM :

@Bernard: Yes! You can! It works with CSS! So, you can use it anywhere on your template:)

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT