jQuery Animated Image Cation with HTML5 Figcaption
File Size: | Unknown |
---|---|
Views Total: | 6225 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.