Back to article: jQuery ContentHover Plugin

jQuery ContentHover Plugin

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

Download

Download source (6KB) or the minified version (3KB)

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

<img id="d1" src="photos/1.jpg" width="300" height="240" />
<div class="contenthover">
	<h3>Lorem ipsum dolor</h3>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat. </p>
	<p><a href="#" class="mybutton">Lorem ipsum</a></p>
</div>

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

1. Simple fade

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

Back to demo select

Use the default effect (fade), add a background color and opacity.

jQuery

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

2. Slide effect with different speed

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

Back to demo select

Using the slide effect, add setting the animation speed to 300 miliseconds.

jQuery

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

3. Advanced slide

Lorem ipsum dolor

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

Lorem ipsum

Back to demo select

Using the slide effect from different direction and a smaller overlay.

jQuery

$('#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
});

4. Hovering on a div instead of an image

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

Back to demo select

The plugin can be used on any html element. In this example it is a <div> element with a couple paragraphs and and image in it.

HTML

<div id="d4" style="width:300px; height:240px; background:#eee; ">
	<div style="padding:20px;">
		<p><img src="photos/3.jpg" /></p>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
	</div>
</div>
<div class="contenthover">
	<h3>Lorem ipsum dolor</h3>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
	<p><a href="#" class="mybutton">Lorem ipsum</a></p>
</div>

jQuery

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

5. Using a transparent png for a better opacity effect

Lorem ipsum dolor

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

Lorem ipsum

Back to demo select

A transparent png could be used instead of the background_opacity option to avoid having the same opacity on the child elements of the overlay. Another option, but less supported by browsers, would be rgba color.

jQuery

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

Extra CSS

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

‹ the .png image

6. Using callbacks

Lorem ipsum dolor

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

Lorem ipsum

Back to demo select

Log

	
	
					
jQuery


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