A repository of over 1000 quality jQuery plugins

jQuery HCaptions

HCaptions is a jQuery Hover plugin.

Created by Ryun

Hover Captions (here in after: HCaptions) is a jQuery plugin that enables you to display caption overlays with cool effects over images, div’s, ect..

Not what you're looking for? Click here to view more Hover jQuery plugins

Hover Captions (HCaptions)

Hover Captions (here in after: HCaptions) is a jQuery plugin that enables you to display caption overlays with cool effects over images, div's, ect..

Demo Site

Initialize plugin

$(window).load(function(){
  $('.hcaption').hcaptions();
});

Example 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>

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>

Options

Name Type Description Default
data_selector string Selector for caption content .cap-overlay
width integer Overlay width full width
height integer Overlay height full height
overlay_x string Horizontal position for the overlay [center, left, right] center
overlay_y string Vertical position for the overlay [center, top, bottom] center
overlay_bg string Background css for overlay inherits
overlay_opacity integer Opacity of overlay 1
effect string Effect for overlay [fade, slide, show/hide] slide
speed integer Animation speed in ms 400
direction string Direction of overlay [top, bottom, right, left] top
zindex integer Base Z-Index 2
onshow function Callback fired when caption is shown none
onhide function Callback fired when caption is hidden none


You might also like these other Hover jQuery Plugins

  • JQuery TouchMenuHover

    Allows ULs (or any element of your choice) that open on li:hover to open on tap/click on mobile platforms such as iOS, Android, WP7 etc

  • JQuery GreyScale Plugin

    A plugin for jQuery convert images to grayscale on the fly and reveal the coloured version on hover

  • JQuery Tooltip Plugin

    A simple hover tooltip