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!