jQuery Plugin To Add Animated Caption Overlay Over Images - hovercap

File Size: 757 KB
Views Total: 2767
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Add Animated Caption Overlay Over Images - hovercap

hovercap is a small jQuery plugin that creates transparent caption overlays with slide or fade animations over your images when hovered.

How to use it:

1. Include the jQuery hovercap plugin after jQuery library in your html page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.hovercap.js"></script>

2. Insert an image with a caption overlay into your page.

<div class="demo">
  <div><img src="i1.jpg" width="300" height="300" alt=""></div>
  <div class="caption-demo">Caption goes here</div>
</div>

3. Initialize the plugin with default options.

$('.demo').hovercap({
  toggleElement: '.caption-demo'
});

4. Options and defaults.

toggleElement: '',
toggleAnimataion: 'slide', // slide or fade
toggleDirection: 'toTop', // toTop, toBottom, toLeft, toRight
animationSpeed: 200,
animationEasing: 'swing',
onSetup: function() {},
onShow: function() {},
onHide: function() {}

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