Hover Slide Effect with jQuery

Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random, i.e. the images will slide to the top or bottom, left or right, fading […]

By Mary Lou in Tutorials on November 16, 2010

View demo Download Source

From our sponsor: Supercharge your marketing across design, automations, analytics, and more, using our marketing smarts.

The idea is based on the beautiful Flash based animation on the Yumaki website.

So, let’s start.

The Markup

For the HTML structure we will create a div element with the class and id “hs_container”. Inside we will place the different image areas with all possible images. The first image will have the class “hs_visible” which will make it being displayed on the top of all other images:

<div id="hs_container" class="hs_container">
	<div class="hs_area hs_area1">
		<img class="hs_visible" src="images/area1/1.jpg" alt=""/>
		<img src="images/area1/2.jpg" alt=""/>
		<img src="images/area1/3.jpg" alt=""/>
	</div>
	<div class="hs_area hs_area2">
		<img class="hs_visible" src="images/area2/1.jpg" alt=""/>
		<img src="images/area2/2.jpg" alt=""/>
		<img src="images/area2/3.jpg" alt=""/>
	</div>
	<div class="hs_area hs_area3">
		<img class="hs_visible" src="images/area3/1.jpg" alt=""/>
		<img src="images/area3/2.jpg" alt=""/>
		<img src="images/area3/3.jpg" alt=""/>
	</div>
	<div class="hs_area hs_area4">
		<img sclass="hs_visible" src="images/area4/1.jpg" alt=""/>
		<img src="images/area4/2.jpg" alt=""/>
		<img src="images/area4/3.jpg" alt=""/>
	</div>
	<div class="hs_area hs_area5">
		<img class="hs_visible" src="images/area5/1.jpg" alt=""/>
		<img src="images/area5/2.jpg" alt=""/>
		<img src="images/area5/3.jpg" alt=""/>
	</div>
</div>

Let’s take a look at the style.

The CSS

In our stylesheet, we will define all the areas and their dimensions. Since we will make them absolute, we will also define the positions for each area. Let’s start by defining the main container:

.hs_container{
	position:relative;
	width:902px;
	height:471px;
	overflow:hidden;
	clear:both;
	border:2px solid #fff;
	cursor:pointer;
	-moz-box-shadow:1px 1px 3px #222;
	-webkit-box-shadow:1px 1px 3px #222;
	box-shadow:1px 1px 3px #222;
}

It’s important that we define the overflow as hidden, since we don’t want the sliding images to be shown when they are out of this container.

Each area will also have its overflow hidden and be of position absolute:

.hs_container .hs_area{
	position:absolute;
	overflow:hidden;
}

We position the images inside of the area and make them invisible:

.hs_area img{
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}

The first image will be visible, so we give it the following class:

.hs_area img.hs_visible{
	display:block;
	z-index:9999;
}

And now, we will define the borders and positions of each area:

.hs_area1{
	border-right:2px solid #fff;
}
.hs_area4, .hs_area5{
	border-top:2px solid #fff;
}
.hs_area4{
	border-right:2px solid #fff;
}
.hs_area3{
	border-top:2px solid #fff;
}
.hs_area1{
	width:449px;
	height:334px;
	top:0px;
	left:0px;
}
.hs_area2{
	width:451px;
	height:165px;
	top:0px;
	left:451px;
}
.hs_area3{
	width:451px;
	height:167px;
	top:165px;
	left:451px;
}
.hs_area4{
	width:192px;
	height:135px;
	top:334px;
	left:0px;
}
.hs_area5{
	width:708px;
	height:135px;
	top:334px;
	left:194px;
}

And that’s all the style! Let’s take a look at the JavaScript.

The JavaScript

For the effects, we will be giving the option to use some easing, so don’t forget to include the jQuery Easing Plugin if you make use of that option.
So, let’s first define some variables:

//custom animations to use
//in the transitions
var animations		= ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];
var total_anim		= animations.length;
//just change this one to one of your choice
var easeType		= 'swing';
//the speed of each transition
var animSpeed		= 450;
//caching
var $hs_container	= $('#hs_container');
var $hs_areas		= $hs_container.find('.hs_area');

When we move the mouse over one of the areas we will animate the current image with an animation from our array, so that the next image gets visible. We will use a flag “over” to know if we can animate a certain area since we don’t want two animations to happen at the same time in one area.

We will have a case for each animation and we will define how the animation will behave.

//first preload all images
$hs_images          = $hs_container.find('img');
var total_images    = $hs_images.length;
var cnt             = 0;
$hs_images.each(function(){
	var $this = $(this);
	$('').load(function(){
		++cnt;
		if(cnt == total_images){
			$hs_areas.each(function(){
				var $area 		= $(this);
				//when the mouse enters the area we animate the current
				//image (random animation from array animations),
				//so that the next one gets visible.
				//"over" is a flag indicating if we can animate 
				//an area or not (we don't want 2 animations 
				//at the same time for each area)
				$area.data('over',true).bind('mouseenter',function(){
					if($area.data('over')){
						$area.data('over',false);
						//how many images in this area?
						var total		= $area.children().length;
						//visible image
						var $current 	= $area.find('img:visible');
						//index of visible image
						var idx_current = $current.index();
						//the next image that's going to be displayed.
						//either the next one, or the first one if the current is the last
						var $next		= (idx_current == total-1) ? $area.children(':first') : $current.next();
						//show next one (not yet visible)
						$next.show();
						//get a random animation
						var anim		= animations[Math.floor(Math.random()*total_anim)];
						switch(anim){
							//current slides out from the right
							case 'right':
								$current.animate({
									'left':$current.width()+'px'
								},
								animSpeed,
								easeType,
								function(){
									$current.hide().css({
										'z-index'	: '1',
										'left'		: '0px'
									});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
							//current slides out from the left
							case 'left':
								$current.animate({
									'left':-$current.width()+'px'
								},
								animSpeed,
								easeType,
								function(){
									$current.hide().css({
										'z-index'	: '1',
										'left'		: '0px'
									});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
							//current slides out from the top	
							case 'top':
								$current.animate({
									'top':-$current.height()+'px'
								},
								animSpeed,
								easeType,
								function(){
									$current.hide().css({
										'z-index'	: '1',
										'top'		: '0px'
									});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
							//current slides out from the bottom	
							case 'bottom':
								$current.animate({
									'top':$current.height()+'px'
								},
								animSpeed,
								easeType,
								function(){
									$current.hide().css({
										'z-index'	: '1',
										'top'		: '0px'
									});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
							//current slides out from the right	and fades out
							case 'rightFade':
								$current.animate({
									'left':$current.width()+'px',
									'opacity':'0'
								},
								animSpeed,
								easeType,
								function(){
									$current.hide().css({
										'z-index'	: '1',
										'left'		: '0px',
										'opacity'	: '1'
									});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
							//current slides out from the left and fades out	
							case 'leftFade':
								$current.animate({
									'left':-$current.width()+'px','opacity':'0'
								},
								animSpeed,
								easeType,
								function(){
									$current.hide().css({
										'z-index'	: '1',
										'left'		: '0px',
										'opacity'	: '1'
									});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
							//current slides out from the top and fades out	
							case 'topFade':
								$current.animate({
									'top':-$current.height()+'px',
									'opacity':'0'
								},
								animSpeed,
								easeType,
								function(){
									$current.hide().css({
										'z-index'	: '1',
										'top'		: '0px',
										'opacity'	: '1'
									});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
							//current slides out from the bottom and fades out	
							case 'bottomFade':
								$current.animate({
									'top':$current.height()+'px',
									'opacity':'0'
								},
								animSpeed,
								easeType,
								function(){
									$current.hide().css({
										'z-index'	: '1',
										'top'		: '0px',
										'opacity'	: '1'
									});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;		
							default:
								$current.animate({
									'left':-$current.width()+'px'
								},
								animSpeed,
								easeType,
								function(){
									$current.hide().css({
										'z-index'	: '1',
										'left'		: '0px'
									});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
						}	
					}
				});
			});
			
			//when clicking the hs_container all areas get slided
			//(just for fun...you would probably want to enter the site
			//or something similar)
			$hs_container.bind('click',function(){
				$hs_areas.trigger('mouseenter');
			});
		}
	}).attr('src',$this.attr('src'));
});

And that’s it! We hope you enjoyed the tutorial and find it useful!

Tagged with: animate hover images jQuery slide

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback ⁵⁰

Comments are closed.

HTC Desire Case December 2, 2010 at 12:10

Excellent demo. Will implement this in my new project related to jewelry
Schro December 3, 2010 at 11:10

Hey..i’m trying to implement it into Joomla here
URL: http://demo.joomlamini.com/3rded/

Thx Mary & Stubbybus
Dara December 3, 2010 at 17:48

Thank you! This will be great for some of my upcoming projects.

I do have one question if instead of clicking on it making all of the images slide would it be possible to make it so that each set of images are a different link that opens in the same window?
Saravana Gopal December 8, 2010 at 12:56

Really cool stuff. I have implemented few stuffs given in previous posts long time before. Eagerly waiting for an opportunity to implement this script in my future work.
ayushi December 23, 2010 at 14:31

i have taken this script i am going to implement on my site
DJFOXMIX December 25, 2010 at 00:52

As I can do to make the links open in the same page?

example code

i need help ! thanks

demo: http://www.portalfoxmix.net
raffar January 24, 2011 at 11:38

great script, but if i put a link on the img i cannot see any img;
nenomita January 24, 2011 at 20:35

great tutorial!
how can i change the images automatically? a instruction would be really great!
Pat February 9, 2011 at 17:38

That is a great tutorial.
Juste one question, what is the Cantarelle.font.js file?
Will that font work on any computer?
Thanx.
- Mary Lou February 9, 2011 at 17:57
  
  That’s the Cufon font and you can read more about Cufon here: https://github.com/sorccu/cufon/wiki/About
  Hope it helps,
  ML
Pat February 9, 2011 at 18:04

Thank you very much Mary Lou!
That concept is not that easy, but I will work on it.
Best from Patrick.
Mike February 17, 2011 at 19:14

Awesome, as always. But the nagging question that I share with others–can some sort of autoplay be triggered?
?? February 22, 2011 at 10:49

very cool effect,I am going to use this effect on my website?thanks so much

????
Mario February 26, 2011 at 11:55

Pretty cool. But the I also miss the auto mode.
KeJSaR March 2, 2011 at 11:49

Beautiful work! Great thanks!!!

But please help! How to make that when you click on the upper right group of images – one page of the site will open? And when you click on the bottom left would open another page? So if we have 5 groups of pictures – user will can open 5 different pages.
Snr Roy March 3, 2011 at 06:15

@Kenjar, I’m with you, I’ve been trying to work this out for hours. Replacing -$hs_areas.trigger(‘mouseenter’);

with
open(“targeturl”);

Might work on the entire image, but how does one do it for individual Area’s?

Overall, this is awesome!
KeJSaR March 3, 2011 at 10:14

I have a solution.

We need nothing to override. Only to put two blo?ks of code:

First after the line with code
var $hs_areas = $hs_container.find(‘.hs_area’);

We put:
var $hs_areas_1 = $hs_container.find(‘.hs_area1’);
var $hs_areas_2 = $hs_container.find(‘.hs_area2’);
var $hs_areas_3 = $hs_container.find(‘.hs_area3’);
var $hs_areas_4 = $hs_container.find(‘.hs_area4’);
var $hs_areas_5 = $hs_container.find(‘.hs_area5’);

And the second after
$hs_container.bind(‘click’,function(){
$hs_areas.trigger(‘mouseenter’);
});

We put:
$hs_areas_1.bind(‘click’,function(){
open(“targeturl_1”);
});
$hs_areas_2.bind(‘click’,function(){
open(“targeturl_2”);
});
$hs_areas_3.bind(‘click’,function(){
open(“targeturl_3”);
});
$hs_areas_4.bind(‘click’,function(){
open(“targeturl_4”);
});
$hs_areas_5.bind(‘click’,function(){
open(“targeturl_5”);
});

I think it looks awful. And I hope somebody can write beautifully. But it works 🙂
KeJSaR March 3, 2011 at 22:30

Many thanks to MARY LOU! Beautiful and a very clean & nice JavaScript code! 🙂

SNR ROY – In my previous example – we do not replace anything, only add.
benivolent March 10, 2011 at 10:14

Thanks for your script.. you are doing great service.
khoa March 27, 2011 at 02:54

very cool.
you’re great.
Ideas24h April 3, 2011 at 15:01

Is auto mode, ready?

Cookie	Duration	Description
__utma	2 years	This cookie is set by Google Analytics and is used to distinguish users and sessions. The cookie is created when the JavaScript library executes and there are no existing __utma cookies. The cookie is updated every time data is sent to Google Analytics.
__utmb	30 minutes	The cookie is set by Google Analytics. The cookie is used to determine new sessions/visits. The cookie is created when the JavaScript library executes and there are no existing __utma cookies. The cookie is updated every time data is sent to Google Analytics.
__utmc	session	The cookie is set by Google Analytics and is deleted when the user closes the browser. The cookie is not used by ga.js. The cookie is used to enable interoperability with urchin.js which is an older version of Google analytics and used in conjunction with the __utmb cookie to determine new sessions/visits.
__utmt	10 minutes	The cookie is set by Google Analytics and is used to throttle request rate.
__utmz	6 months	This cookie is set by Google analytics and is used to store the traffic source or campaign through which the visitor reached your site.

Cookie	Duration	Description
IDE	1 year 24 days	Used by Google DoubleClick and stores information about how the user uses the website and any other advertisement before visiting the website. This is used to present users with ads that are relevant to them according to the user profile.
test_cookie	15 minutes	This cookie is set by doubleclick.net. The purpose of the cookie is to determine if the user's browser supports cookies.

Cookie	Duration	Description
_mcid	1 year	No description
ak_bmsc	2 hours	No description
cookielawinfo-checkbox-functional	1 year	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-others	1 year	No description

The Markup

The CSS

The JavaScript

Mary Lou

Distorted Link Effects with SVG Filters

How to Create a Motion Hover Effect for a Background Image Grid

Inline Menu Layout with Gallery Panel

Subscribe to Codrops

CSS Reference

Feedback 50

Feedback ⁵⁰