jQuery Animated Image Cation with HTML5 Figcaption

The figure and figcaption elements are new to HTML5. Before developers had to use div(short for divider) elements with classes to wrap images and captions for styling and scripting purposes. Now the figure and figcaption elements will take care of this to both simplify HTML markup and give search engines more information about your website and its content.

In this tutorial we're going to create cross-browser animated image captions using jQuery and HTML5 figure and figcaption elements.

See also:

• Animated jQuery Image Caption Overlay Effects Plugin - HCaptions
• Sticky Image Captions with jQuery
• Amazing Thumbnail Zoom Plugin With Sliding Captions
• Animated jQuery Image Caption On Hover Plugin - Capty

How to use it:

1. Load the jQuery javascript library

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2. Insert an image using HTML5 figure and figcaption elements. The figure is great to fill out alt, width, and height attributes for images to help search engines know more about your content. The HTML5 element figcaption should be used for image, diagram, illustration, and photo captions.

<figure> 
<img src="1.jpg" alt="ALT" width="400" height="600" /> 
<figcaption>Description </figcaption>
</figure>

3. The CSS

<style>
figure {
display: block;
width: 400px;
height: 600px;
position: relative;
overflow: hidden;
}
figcaption {
display: block;
width: 380px;
height: 40px;
padding: 10px;
position: absolute;
left: 0;
top: 540px;
color: #FFFFFF;
font: 13px/20px Arial, sans-serif;
background: #000000;
background: rgba(0,0,0,.5);
}
</style>

4. The javascript

<script>
/*First we tell older browsers that read the figure
and figcaption elements to add them to the DOM.*/
document.createElement('figure');
document.createElement('figcaption');

$(document).ready(function(){
/*For browsers that understand javascript
position the caption below the image where 
it will be hidden from view*/
$('figcaption').css('top','600px');

/*Create a function when someone hovers over
the figure element*/
$('figure').hover(function(){

/*Select the figcaption element that
is inside the figure element hovered
hover. Then we stop any animation that
might be happening with that element
(this prevents animation looping) and
animate it to be 140px from the top of
the figure element.*/
$(this).find('figcaption').stop().animate({'top':'540px'}, 200, function(){});

/*When someone is done hovering over
a figure element fire the function
below*/
},function(){

/*Animate the figcaption back out of
view which is 200px from the top of
the figure element. We also stop any
animation that might be happening with
the element first to prevent looping.*/
$(this).find('figcaption').stop().animate({'top':'600px'}, 200, function(){});
});
});
</script>

---

This awesome jQuery plugin is developed by Keegan Robinson. For more Advanced Usages, please check the demo page or visit the official website.