Animate a hover with jQuery

RSS FeedAnimate a hover with jQuery

Twitter about this article

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>
			<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

Advertisements

27 comments on “Animate a hover with jQuery

  1. Hello just thought i would tell you something.. This is twice now i’ve landed on your blog in the last 3 weeks searching for completely unrelated things. Spooky or what?

  2. I’m extremely impressed with your writing skills and also with the layout on your weblog. Is this a paid theme or did you modify it yourself? Anyway keep up the nice quality writing, it’s rare to see a great blog like this one today

  3. Wow, incredible blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is magnificent, let alone the content!

  4. Someone necessarily help to make significantly articles I’d state. That is the first time I frequented your web page and thus far? I surprised with the research you made to make this actual post amazing. Excellent process!

  5. Thanks for the tips you have shared here. Something else I would like to say is that computer memory specifications generally go up along with other advances in the technologies. For instance, if new generations of processor chips are made in the market, there is certainly usually an equivalent increase in the scale preferences of both personal computer memory and also hard drive space. This is because software program operated by means of these cpus will inevitably boost in power to benefit from the new technological know-how.

  6. Hi, Neat post. There’s a problem with your site in internet explorer, would test this… IE still is the market leader and a big portion of people will miss your fantastic writing because of this problem.

  7. This internet site might be a walk-through its the data you wanted in regards to this and didn’t know who ought to. Glimpse here, and you’ll completely discover it.

  8. Nice post. I learn something new and challenging on sites I stumbleupon every day. It’s always exciting to read through content from other authors and practice a little something from other web sites.

  9. I just like the priceless data you provide inside of your content.I will bookmark your blog site and take a look at again here often.I am fairly convinced I’ll find out a great deal of new stuff perfect here! Very good luck for your following!

  10. I like the treasured data you present in the content pieces.I’ll bookmark your website and verify again the following recurrently.I am very definitely sure I’ll study considerably of recent things precise right here! Great luck with the up coming!

  11. Thanks a lot for giving everyone an extraordinarily superb possiblity to read in detail from this website. It’s always so fantastic and also stuffed with a good time for me and my office fellow workers to visit your blog at minimum 3 times in a week to read through the fresh stuff you have. And of course, I’m also usually pleased for the splendid creative concepts served by you. Some 1 tips in this article are rather the simplest we have all ever had.

  12. Thanks for your exciting article. Other thing is that mesothelioma cancer is generally brought on by the breathing of dust from mesothelioma, which is a cancer causing material. Its commonly witnessed among staff in the engineering industry who have long experience of asbestos. It is caused by residing in asbestos insulated buildings for long periods of time, Genetic makeup plays a crucial role, and some folks are more vulnerable for the risk than others.

  13. Thanks for your fascinating article. Other thing is that mesothelioma is generally attributable to the breathing of materials from asbestos, which is a very toxic material. It is commonly witnessed among staff in the construction industry who’ve long contact with asbestos. It could be caused by living in asbestos covered buildings for long periods of time, Genetic makeup plays a crucial role, and some persons are more vulnerable on the risk than others.

  14. *I discovered your blog site on google and check a few of your early posts. Continue to keep up the very good operate. I just additional up your RSS feed to my MSN News Reader. Seeking forward to reading more from you later on!�

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s