Simple Image Caption Hover Effects with jQuery and Html5 - Caption Rollover

A minimal implementation of image caption hover effects built on top of jQuery, jQuery easing plugin, CSS, and HTML5 <figue> <figcaption> elements.

How to use it:

1. Include the required jQuery and jQuery easing plugin on the web page.

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

2. Insert an image with a image caption using <figue> & <figcaption> elements.

<figure class="figure">
<img src="images/img.jpg">
<figcaption class="figcaption">Image caption goes here</figcaption>
</figure>

3. The required CSS styles. Tweak them whatever you like.

.figure {
position: relative;
float: left;
overflow: hidden;
margin: 1.5em;
}
.figcaption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #2ecc71;
color:#fff;
opacity: 0;
}
img {
display: block;
}

5. The Javascript to create an animated image caption overlay on mouse hover. Free free to customize the overlay opacity, animation speed and easing options to fit your needs.

<script>

$( document ).ready( function() {
    $(".figcaption").hover(
    	function() { $( this ).stop().animate( { opacity:1 }, 700, "easeOutQuad" ); },
    	function() { $( this ).stop().animate( { opacity:0 }, 700, "easeOutQuad" ); }
    )
});

</script>

---

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