Example 1

horizontal Sliding Demo

In this demo the two halfs of the overlay are positioned absolutely to the left and right of each thumbnail. They are animated using the jQuery .animate function when hovered over.

The .hover function handles both the mouse in and mouse out events. On mouse out the two halfs of the overlay animate out of frame vertically with a callback returning them to their original positions using the .css function.

$('article.hoz').hover(function(){
	$(this).children('section.top').stop().animate({'left' : '0'}, 200);
	$(this).children('section.bottom').stop().animate({'left' : '0'}, 200);
}, function(){
	$(this).children('section.top').stop().animate({'top' : '-140'}, 200, function(){
		$(this).css({'top' : '0', 'left' : '-280px'});
	});
	$(this).children('section.bottom').stop().animate({'bottom' : '-140'}, 200, function(){
		$(this).css({'bottom' : '0', 'left' : '560px'});
	});
});
Thumbnail

Lorem ipsum

Donec ut mollis turpis. Donec is semper sed tellus vel auctor. Cras venenatis, tellus a ultrices al tempor mi mauris.

Thumbnail

Lorem ipsum

Donec ut mollis turpis. Donec is semper sed tellus vel auctor. Cras venenatis, tellus a ultrices al tempor mi mauris.

Thumbnail

Lorem ipsum

Donec ut mollis turpis. Donec is semper sed tellus vel auctor. Cras venenatis, tellus a ultrices al tempor mi mauris.

Example 2

Vertical Bounce Demo

In this demo the two halfs of the overlay are positioned absolutely to the top and bottom of each thumbnail. They are animated using the jQuery .animate function when hovered over.

The bouncing effect is achieved using using the jQuery easing plugin with diferent transitions used for the mouse in and mouse out events.

$('article.bounce').hover(function(){
	$(this).children('section.top').stop().animate({'top' : '0'}, 500, 'easeOutBounce');
	$(this).children('section.bottom').stop().animate({'bottom' : '0'}, 500, 'easeOutBounce');
}, function(){
	$(this).children('section.top').stop().animate({'top' : '-140'}, 500, 'easeInOutQuint');
	$(this).children('section.bottom').stop().animate({'bottom' : '-140'}, 500, 'easeInOutQuint');
});
Thumbnail

Lorem ipsum

Donec ut mollis turpis. Donec is semper sed tellus vel auctor. Cras venenatis, tellus a ultrices al tempor mi mauris.

Thumbnail

Lorem ipsum

Donec ut mollis turpis. Donec is semper sed tellus vel auctor. Cras venenatis, tellus a ultrices al tempor mi mauris.

Thumbnail

Lorem ipsum

Donec ut mollis turpis. Donec is semper sed tellus vel auctor. Cras venenatis, tellus a ultrices al tempor mi mauris.

Example 3

Blurred Overlay Demo

In this demo two images are positioned absolutely on to of each other. The top most image is blurred using photoshp's blur tool.

On hover the blurred image then fades out using the jQuery .fadeTo function revealing the un-blurred image below.

$('article.blur').hover(function(){
	$(this).children('img.thumb-overlay').stop().fadeTo(200, 1);
}, function(){
	$(this).children('img.thumb-overlay').stop().fadeTo(200, 0);
});
Thumbnail Thumbnail
Thumbnail Thumbnail
Thumbnail Thumbnail

Example 4

De-saturated Overlay Demo

This demo uses the same technique as the previous example but with the overlayed image de-saturated in photoshop rather than blurred.

$('article.color').hover(function(){
	$(this).children('img.thumb-overlay').stop().fadeTo(600, 1);
}, function(){
	$(this).children('img.thumb-overlay').stop().fadeTo(600, 0);
});
Thumbnail Thumbnail
Thumbnail Thumbnail
Thumbnail Thumbnail

Example 5

CSS Rotation Demo

This demo uses no jQuery or javaScript to handle the animation, rather it uses CSS3 transforms and transitions to achieve this.

The transition duration and property are initialised on the thumbnail class on your style sheet with the rotation triggered using the :hover pseudo class.

article.spin img.thumb{
	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	-o-transition-duration: 0.8s;
	transition-duration: 0.8s;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;
}

article.spin img.thumb:hover{
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	transform:rotate(180deg);
} 
Thumbnail
Thumbnail
Thumbnail