jQuery Animated Image Captions

30th of September 2013 13

jQuery Animated Image Captions

Add animated image captions to your images using jQuery and jQueryUI. This is a simple jQuery tutorial where you’ll learn how to add a nice animated image ca…
Video Rating: 4 / 5

Filed under § jquery animate — Tagged with , , ,

Share it!

Was it good for you to?


Support for the site!

No sponsors at the moment.

13 great comment(s) for this post

  1. Bren Isidro 12:06 pm 30/09 of 2013

    Hi im thinking of making a gallery of photos. On the front page Id like to display thumbnails of album covers for each collection. What I want to achieve is when I hover over an image (Album cover) that image will turn into a slideshow/ transition of images that are included in that album. Similar like on Facebook when you hover an album it shows a slide of pictures inside the album Whats the easiest and best approach to accomplish this

  2. bioshock14 12:11 pm 30/09 of 2013

    This was a great tutorial, worked first time. Very useful. Thank you.

  3. hughan00 12:19 pm 30/09 of 2013

    This was very helpful. Thank you. I hope you don’t mind me pointing out that the singular of the word ‘parentheSES’ is ‘parentheSIS’. (The last syllable of the word ‘parentheses’ is pronounced like the last syllable of the word ‘esSAYS’. The last syllable of the word ‘parenthesis’ is pronounced like the last syllable of the word ‘emphaSIS’. (The same applies to ‘axis’ (singular) and ‘axes’ (plural), which you also referred to when talking about the css.))

  4. wormracer08 12:22 pm 30/09 of 2013

    Thanks for the compliment and suggestion HMaxTube11.

  5. H. Max 1:15 pm 30/09 of 2013

    You know your way around jQuery. You should consider better rehearsal, maybe have a script over to the side while you record. Your explanations are very good when you know what you’re trying to express.

  6. MyGoogle 1:54 pm 30/09 of 2013

    Nice tutorial, only you should not use div id=”spacer”, cause you have more then one id spacer and it is not valid, You cant have more than one element with a specific ID on website. Use class instead.

  7. wormracer08 2:40 pm 30/09 of 2013

    Maybe try wrapping the img tag with an anchor, not a great solution but should work for you.

  8. socialhole 3:07 pm 30/09 of 2013

    unfortunately when u put a link as a target the alternative text is no longer valid….any suggestions??

  9. wormracer08 3:08 pm 30/09 of 2013

    Thanks buddy!

  10. wormracer08 3:10 pm 30/09 of 2013

    Thanks man! Yeah it has some short comings for sure, but not bad for very little work. You could overcome the text issue by increasing the height of .caption div.

  11. MrShawnlloyd 4:10 pm 30/09 of 2013

    very nice effect !

  12. wormracer08 4:55 pm 30/09 of 2013

    Extra butter mang!

  13. Adam Khoury 5:38 pm 30/09 of 2013

    Cool effect… I’ll have to get me some popcorn and check this out


Your opinion matters. Add it below.

Tip: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recent comments


Copyright jqueryui.info since 2010. All rights reserved. Design and the Absolute Theme by Tommie Hansen.