jQuery Plugin For Revealing Alternative Content On Hover Over - Hover Panels

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.