Beautiful Animated Hover Effect Captions For Images On Blogger




| 18 comments

Css3 Blogger Tutorial

In this post we have not only an amazing effect you can add to the images you use in your blog posts but it's amazingly simple and amazingly fast so wont slow down you page load time.The effect is similar to what you will see on many Featured Posts Gadgets, when you hover your cursor over the image a caption scrolls up from the bottom with your selected text.

So, you can have the title of the image, a description, date taken, credit or anything you like.The code we will use has No Javascript this ensures it will load fast and as i said not slow down your blog.The code is all Css3 (Don't Worry I Will Keep It Simple) so you have a flowing and transparent effect with the caption.There is also a stylish Shadow edge around the image On-Hover.

Just show us the demo and screenshot so we can see for ourselves i here you shout !

OK But, Before i show you the demo you should note while this image caption will work with all browsers older versions of Internet Explorer will not have the fluid style or transparency.Internet Explorer 9 does a better job and it works perfect in Firefox and Chrome.


Live Demo - Animated Hover Effect Image Caption

Screenshot

Beautiful Animated Hover Effect Captions For Images On Blogger

Use Hover Effect Image Captions On Your Blog


Step 1. In Your Blogger Dashboard Click > Design > Edit Html

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

]]></b:skin>

Step 3. Copy And Paste The Following Code Directly Above / Before  ]]></b:skin>

Scroll Box - Make Sure Your Get All the Code
<!--Start Image Caption Css-->
#image-hover {
}

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

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

#image-hover .caption b {
text-shadow: 0px 2px 0px #000;
}
#image-hover .caption {
color: #ddd;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}
<!--End Image Caption Css, Info : http://www.spiceupyourblog.com -->
Code Credits - Blogger Bits

That's the Css code to create the effect added to your template, The next step is the image itself.

When you want to use this effect on an image in a post copy the code below, paste it into your post and then add your image URL and text as shown.

<div id="image-hover">
<div id='figure'>
<img src="IMAGE-URL-HERE"/>
<span class='caption'>
<b>Title Here..</b>
Description Here...
</span>
</div>
</div>

Important


You will need to add your image URL and text as shown Below :

IMAGE-URL-HERE : Replace With The URL Of The image You Want To Use.
Title Here : Replace With An Image Title Or Other Text.
Description Here : Replace With An Image Description Or Other Text.

How To Get Your Image URL


I try to leave no one behind so if your a complete newbie you may ask 'How Do I Get The Image URL ?'.

OK, basically upload your image to blogger as usual, in the HTML view of your post editor your image code will look something like this :

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-BC9jF0JKS-Y/TY8hA-NPDwI/AAAAAAAADDI/dGJMM5wPQSo/s1600/hover-effect-image-caption.jpg" imageanchor="1" style=""><img border="0" height="213" width="320" src="http://4.bp.blogspot.com/-BC9jF0JKS-Y/TY8hA-NPDwI/AAAAAAAADDI/dGJMM5wPQSo/s320/hover-effect-image-caption.jpg" /></a></div>

The actual image URL is the part in red, if your still having trouble drop a comment.

That another great Blogger Image Tutorial with a very cool effect, make sure to check out more of our Image Tips and Blogger Gadgets.

Drop your Comments and Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

18 comments:

  1. thank you so much really helpful

    ReplyDelete
  2. Really Super. Because, steps to do is very simple. Thanks to shared. :)

    By

    http://hari11888.blogspot.com

    ReplyDelete
  3. This post was really great. I'm going to use this effect on my blog.
    Thanks a lot!

    ReplyDelete
  4. Useful post.

    I have a question please:

    What change should I make to the code, if I want the title and description of the hover effect to be Right to Left and aslo with my own font?

    Thanks,

    Masnawi.

    ReplyDelete
  5. Thanks Everyone For The Positive Comments !

    @ Masnawi - The font is set in the Css code within the scroll box :

    font-family: Arial, Helvetica, sans-serif;

    I presume you write your blog in a language that reads right to left.I have never looked into this before and don't currently have an answer.I will see if there is a simple solution and post another comment to let you know.

    Paul.

    ReplyDelete
  6. Thank you Paul. Yes, my weblog is in a language which is RTL(right to left) written.

    I am eagerly waiting to read your comment on solving this issue.

    ReplyDelete
  7. Would it be possible to put an example picture with image caption into your post? From reading this, I'm not sure whether it's worth the effort of install it and customising each picture or not.

    ReplyDelete
  8. @ Mary - Did you see the demo in the test blog ? It would look the very same here.You can try it out in a post on your blog and if you dont like it just remove the code..

    Paul.

    ReplyDelete
  9. Thanks it is very helpful it solved many problems.

    ReplyDelete
  10. very nice tricks..thanks, i used on my blog

    ReplyDelete
  11. Hi there

    you have a fantastic blog tuttorials even i have added several widgets from your blog. Please can you tell me that How you have added flying twitter bird on your blog. Please can you tell me?

    ReplyDelete
  12. Thank you very good and easy,
    I was looking for something for a long time.

    ReplyDelete
  13. Thank you Mr Paul. Love this.

    ReplyDelete
  14. hi. i love the effect but im having ALOT of issues with image size... it doent matter if i upload the pics directly or copy the url from flickr or picassa...

    ReplyDelete
    Replies
    1. Hi Kim, you could use the exact same code (img src...) from before, just put it in the right divs. Meaing: replace <img src ... from the new code with <img src.. from the old code that has all the dimensions and formatting.

      Hope i made it clear enough.

      Paul, thanks for the code :)

      Delete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us