jQuery HoverCap

jQuery-Hovercap is the jQuery plugin that display caption overlays over images.

Documents

Usage

<head>
...
<script src="js/jquery.js"></script>
<script src="jquery.hovercap.js"></script>
<script>
$(function() {
  $('.target').hovercap({
    toggleElement: '.target__caption'
  });
});
</script>
</head>
<body>

<div class="target">
<div class="target__image"><img src="..." alt=""></div>
<div class="target__caption">Content...</div>
</div>

...

</body>

Caption01

Effects Example

Fade

$(function() {
  $('.target').hovercap({
    toggleElement: '.example__caption',
    toggleAnimation: 'fade'
  });
});

Caption Fade

Slide[direction: toTop]

$(function() {
  $('.target').hovercap({
    toggleElement: '.example__caption',
    toggleAnimation: 'slide',
    toggleDirection: 'toTop'
  });
});

Caption Slide[direction: toTop]

Slide[direction: toRight]

$(function() {
  $('.target').hovercap({
    toggleElement: '.example__caption',
    toggleAnimation: 'slide',
    toggleDirection: 'toRight'
  });
});

Caption Slide[direction: toRight]

Slide[direction: toBottom]

$(function() {
  $('.target').hovercap({
    toggleElement: '.example__caption',
    toggleAnimation: 'slide',
    toggleDirection: 'toBottom'
  });
});

Caption Slide[direction: toBottom]

Slide[direction: toLeft]

$(function() {
  $('.target').hovercap({
    toggleElement: '.example__caption',
    toggleAnimation: 'slide',
    toggleDirection: 'toLeft'
  });
});

Caption Slide[direction: toLeft]

2014, Sato Daiki.