jQuery ContentHover Plugin

ContentHover is a small jQuery plugin that helps you show some hidden content on top of an element when the mouse hovers over it. There are options to chose how your hover effect would appear, like fade in or slide in from any direction, you can change the opacity of the overlay etc. (Check out the options below)

Usage

Lets assume you have an image and want to show some text on top of it when the mouse hover over it.

Add a div with class="contenthover" after the image:

<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>

Then fire the plugin like this: (using the default options)

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

It doesn't always have to be an image and a div. It would work with any html element.

For demos check Examples & Usage.

Options reference

Here's the default options object with an explanation on every available option.

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

Compatibility

It has been tested on the latest versions of Firefox, Chrome, IE and Opera and seems to work well. It also works on IE7, 8 and 9. It does not make use of any CSS3 transitions and effects, so the result should be similar on most browsers.

To-do

• Bug fixing
• Add more effects

Feel free to comment or report any bug.