HCaptions.js – animated jQuery image caption overlays
|HCaptions.js is a jQuery plugin, that displays cool caption overlay effects when your mouse hovers over images or other selectors (elements).
jQuery image caption hover effect
We can display caption overlays with cool effects over images, div’s, etc.

Initialize jQuery image caption plugin
$(window).load(function(){ $('.hcaption').hcaptions(); });
Sample markup
This example uses the data-target attribute to target the content:
<a href="#" data-target="#myToggle" class="hcaption"> <img src="img/cupcakes.png"> </a> <div id="myToggle" class="hide"> <h5>Example Image</h5> <p> Content.. </p> </div>
The “magic attributes”
With magic attributes you can override the settings for individual captions. A magic attribute is a attribute prepended with cap- for example to override the effect you would use cap-effect=”fade”.
Example – magic attribute markup:
<a href="#" data-target="#myToggle" class="hcaption" cap-effect="fade" cap-height="200"> <img src="img/cupcakes.png"> </a> <div id="myToggle" class="hide"> <h5>Example Image</h5> <p> Content.. </p> </div>
Demo, docs, GitHub and download:
http://ryun.github.io/HCaptions
Enjoy!