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.
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!
thanks a lot for this solution, it’s really simple to implement.. thanks again..
Would it be possible to have this effect and have all the images in one sprite?
Yay I love it, I am going to use it in my website and credit your hard lovely cute beaueitiful work!
The script is too easy!
thanks it really help