Jan
23

Hover image link fader with jquery

By Cedric Dugas // Articles, featured // 11 Comments

Are you bored to see the same old CSS image replacement tricks for your hover links? Add a little twist, make it fadeIn and fadeOut on hover without even touching the CSS.

With this script, you can automatically fade your image links by adding the class “linkFader” on your tag. The CSS hover will still work if javascript is disabled, it’s like Christmas!.

Your link must use a CSS image replacement technique, otherwise it will not work. That’s because this script is based on background positions hover technic. But you should always do your image links like this anyway.

View demo

2 simple steps to get this to work on your website

Step 1: add the jquery library script and the hover script in your <head> document

Step 2 : On your <a> tag add the class linkFader

That’s it, you could have all your image hover links working within 2 minutes.

Download the source code View demo

It take time to maintain these javascript snippets, if you like and use the work up here, please consider buying me a beer, it’s cheap and a simple way to give back!

Author: Cedric Dugas

Cedric Dugas is an experienced front-end developer and founder of Position: Absolute, based in Montreal, Canada. When he is not doing CSS and jquery (does it ever happen?), he likes to read on web usability and play trumpet. Why don't you follow him on twitter.

11 Comments to “Hover image link fader with jquery”

esteban September 15, 2009 at 4:34 pm

thanks a lot for this solution, it’s really simple to implement.. thanks again..

Reply
Jon September 21, 2009 at 10:38 am

Would it be possible to have this effect and have all the images in one sprite?

Reply
Dan November 24, 2009 at 3:36 pm

Yay I love it, I am going to use it in my website and credit your hard lovely cute beaueitiful work!

Reply
hiro December 21, 2009 at 3:27 am

The script is too easy!

Reply
memordial February 10, 2010 at 2:11 pm

thanks it really help

Reply
Fading jquery tutorials « Designdefine's Blog April 1, 2010 at 12:17 pm

[...] Hover image link fader with jquery [...]

Reply
SUPER USEFUL JQUERY « Designdefine's Blog April 15, 2010 at 1:44 am

[...] Hover image link fader with jquery [...]

Reply
Brano May 11, 2010 at 4:22 pm

Can this effect be made with buttons?

Reply
Mj March 31, 2011 at 1:37 pm

Just what i need. Thanks for sharing.

Reply
Dan May 28, 2011 at 3:01 pm

Hi can this code work with PHP to dynamically show thumbnails?

Thanks,
Dan

Reply
Raydel August 22, 2011 at 2:57 pm

Great script, but I have problems with .png images, black border when mouse is over.
thanks

Reply