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.











