jQuery ContentHover Plugin

A jQuery plugin that shows hidden content on top of an element when the mouse hovers over it.

Documentation

A complete options reference is available on the blog post, along with comments and updates.

Demos

All demos use pretty much the same html markup, and css:

HTML

        
Lorem ipsum dolor
        
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat. 
        
Lorem ipsum

CSS

.contenthover { padding:20px 20px 10px 20px; }
.contenthover, .contenthover h3, contenthover a { color:#fff; }
.contenthover h3, .contenthover p { margin:0 0 10px 0; line-height:1.4em; padding:0; }
.contenthover a.mybutton { display:block; float:left; padding:5px 10px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.contenthover a.mybutton:hover { background:#34742d }

Select demo

1. Simple fade
2. Slide effect with different speed
3. Slide from different direction and a smaller overlay
4. Hovering on a div instead of an image
5. Using a transparent png for better opacity effect
6. Using callbacks

$('#d1').contenthover({
        overlay_background:'#000',
        overlay_opacity:0.8
});

$('#d2').contenthover({
        effect:'slide',
        slide_speed:300,
        overlay_background:'#000',
        overlay_opacity:0.8
});

$('#d3').contenthover({
        overlay_width:270,
        overlay_height:180,
        effect:'slide',
        slide_direction:'right',
        overlay_x_position:'right',
        overlay_y_position:'center',
        overlay_background:'#000',
        overlay_opacity:0.8
});

        

                

                
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
        


        
Lorem ipsum dolor
        
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
        
Lorem ipsum

$('#d4').contenthover({
        overlay_background:'#333'
});

$('#d4').contenthover({
        hover_class:'mybackground'
});

.mybackground { background:url(transparent_bg.png); }

$('#d6').contenthover({
        overlay_background:'#000',
        overlay_opacity:0.8,
        effect:'slide',
        slide_speed:500,
        slide_direction:'left',
        onshow:function(){
                $('
Hover element shown
').appendTo($('#d6_log'));
        },
        onhide:function(){
                $('
Hover element hidden
').appendTo($('#d6_log'));
        }
});