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 thoughts on “Hover image link fader with jquery

Comments are closed.