jQuery Plugin For Revealing Alternative Content On Hover Over - Hover Panels
File Size: | 37.6KB |
---|---|
Views Total: | 3285 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Hover Panels is a lightweight, touch ready and cross browser jQuery plugin that allows you to display alternative content with animated fade effect when mouse hovers over. Check the demo to see it in action.
See also:
- Animated Content Hover Effect with jQuery
- Grayscale Image Hover Effect with HTML5 and jQuery
- Animated Hover Effect with jQuery
How to use it:
1. Include jQuery library and jQuery Hover Panels on your web page, before </body> tag
<script src="js/vendor/jquery-1.9.1.min.js"></script> <script src="js/jquery.hoverpanels.js"></script>
2. Markup html structure
<div class="hoverpanels"> <div class="panel"> <h1>Panel 1</h1> <div class="default"> [Default content 1] </div> <div class="hover"> [Alternative content 1] </div> </div> <div class="panel"> <h1>Panel 2</h1> <div class="default"> [Default content 2] </div> <div class="hover"> [Alternative content2 ] </div> </div> ... </div>
3. Call the plugin
<script> (function(){ $('.hoverpanels').hoverpanels(); }()); </script>
4. Options
<script> (function(){ $('.hoverpanels').hoverpanels({ default_content: '.default', // Class of default content hover_content: '.hover', // // Class of alternative content fade_level: '0.5', // fade level effect: 'fadeSiblings' // fading effect, fadeSiblings or none }); }()); </script>
This awesome jQuery plugin is developed by jonathan-fielding. For more Advanced Usages, please check the demo page or visit the official website.