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

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.