Animated Content Hover Effect with jQuery

A lightweight and useful jQuery Plugin that shows hidden content on top of an element when the mouse hovers over it.  You can choose how the hover effect would appear like fade in or slide in from any direction, you can change the opacity of the overlay as well.

Basic Usage:

1. Include jQuery library and contenthover.js

<script src="jquery.min.js"></script>
<script src="jquery.contenthover.js"></script>

2. Call the plugin

<script>
$(function(){
    $('.myimage').contenthover();
});
</script>

3. Markup

<img class="myimage" src="image.jpg" width="300" height="240" />
<div class="contenthover" style="padding:20px">This would show on top of my image on mouseover.</div>

4. Options

data_selector: '.contenthover', // The selector for the element that will be the content of the overlay element to show on hover 
width: 0,                       // Set to 0 to let the plugin figure it out
height: 0,                      // Set to 0 to let the plugin figure it out
overlay_width: 0,               // The overlay element's width. Set to 0 to use the same as 'width'
overlay_height: 0,              // The overlay element's height. Set to 0 to use the same as 'height'
overlay_x_position: 'center',   // [center, left, right] The position of the overlay horizontally (if overlay_width is different from width)
overlay_y_position: 'bottom',   // [center, top, bottom] The position of the overlay vertically (if overlay_width is different from width)
overlay_background: '',         // The css background of the overlay element
overlay_opacity: 1,             // [0-1] The opacity of the overlay element
effect: 'fade',                 // [fade, slide, show] The effect to use
fade_speed: 400,                // Effect ducation for the 'fade' effect only
slide_speed: 400,               // Effect ducation for the 'slide' effect only
slide_direction: 'bottom',      // [top, bottom, right, left] From which direction should the overlay apear, for the slide effect only
zindex: 2,                      // The base z-index value
wrapper_class: 'ch_wrapper',    // CSS class to add to the wrapper
normal_class: 'ch_normal',      // CSS class to add to the 'normal' element
hover_class: 'ch_hover',        // CSS class to add to the 'hover' element
onshow: function(){},           // Callback function when the 'hover' element is shown
onhide: function(){}            // Callback function when the 'hover' element is hidden

---

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