Hover image link fader with jquery

by Cedric Dugas on January 23, 2009

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!







11 comments

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

by esteban on September 15, 2009 at 4:34 pm. #

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

by Jon on September 21, 2009 at 10:38 am. #

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

by Dan on November 24, 2009 at 3:36 pm. #

The script is too easy!

by hiro on December 21, 2009 at 3:27 am. #

thanks it really help

by memordial on February 10, 2010 at 2:11 pm. #

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

by Fading jquery tutorials « Designdefine's Blog on April 1, 2010 at 12:17 pm. #

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

by SUPER USEFUL JQUERY « Designdefine's Blog on April 15, 2010 at 1:44 am. #

Can this effect be made with buttons?

by Brano on May 11, 2010 at 4:22 pm. #

Just what i need. Thanks for sharing.

by Mj on March 31, 2011 at 1:37 pm. #

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

Thanks,
Dan

by Dan on May 28, 2011 at 3:01 pm. #

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

by Raydel on August 22, 2011 at 2:57 pm. #