Timothy van Sas is very good in webdesign, xhtml, css and smooth dancing

RSS FeedAnimate a hover with jQuery

Animate an image while hovering it and show the visitors information while doing that. Sounds simple huh? Well it is, but the effect is nice and can be nice for a portfolio, for example.

Ok, lets take a look at an example first, after that i will show you how it’s done.

It’s quite simple, you will make a list with a relative position, the image you will place with an absolute position, while hovering it you will give jQuery the command to give it a nice animating effect.

Ok, good luck… just kidding, i will break the code down for you.

jQuery code

		$(function() {
			$('ul.hover_block li').hover(function(){
				$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
			});
		});

We transfer the image to another positing while hovering it. If you effect go fast you can lower the duration. If you want the effect go slower you…? Yep, you got it, you increase the duration.

CSS code

		ul.hover_block li{
			list-style:none;
			float:left;
			background: #fff;
			padding: 10px;
			width:300px; position: relative;
			margin-right: 20px; }

		ul.hover_block li a {
			display: block;
			position: relative;
			overflow: hidden;
			height: 150px;
			width: 268px;
			padding: 16px;
			color: #000;
			font: 1.6em/1.3 Helvetica, Arial, sans-serif;
		}

		ul.hover_block li a { text-decoration: none; }

		ul.hover_block li img {
			position: absolute;
			top: 0;
			left: 0;
			border: 0;
		}
		

Like i mentioned before, the list will be relative and the image will be absolute.

HTML code

		<ul class="hover_block">
			<li><a href="/"><img src="your_image.gif" alt="alt" /> Text</a></li>
			<li><a href="/"><img src="your_image.gif" alt="alt" /> Text.</a></li>
		</ul>
		

Take a look at an example Check all articles