This is just a simple image fade.

This is the HTML:

<a href="#"><img src="#.png" class="fade"> 

Pretty simple, right?

.fade { 
    opacity: 1; 
    transition: opacity .65s ease-in-out; 
    -moz-transition: opacity .65s ease-in-out; 
    -webkit-transition: opacity .65s ease-in-out; 
.fade:hover { 
    opacity: 0.2; 
About the Author

I do a lot of things... lets just have it at that... ;)

Yes, it's simple if you are only targetting CSS3 compatable browsers, which IE9 is definitely not :-/

Soon, transitions will become common place, but not until windows 7 has gone byebye.. in an age where XP is still extremely common, it may be some time.

If you have this as part of your core functionality, Im afraid many would consider the site unusable if they do not have a compatible browser.

Granted, that's mainly IE users - but that's also likely to be a large portion of your potential user base...

commented: ;) +8
<M/> 170

@ryan, i should keep that in mind next time when I provide a snippet. Thanks for the advice. :)

BTW, i meant to post this in the code snippets, sorry for any confusions.

Personally, I have no problem with adding these types of flair to my pages. If some browsers cannot see/use them, it's no big deal.

Thanks for the snippet.

<M/> commented: Thanks :) +8

If you want it to convey across all browsers then it may be worth having a look at Javascript, notably the jQuery "Fade" function. You can find the information on it HERE. Hope this helps in some way.

<M/> commented: Good idea +8
Dani 1,730

As Paulkd points out, effects like these aren't designed to be part of core functionality. They're just design elements that, as long as they degrade nicely, people shouldn't even know what they're missing.

<M/> 170

@ObSys, thanks for the recommendation, i should give that a try :)

@paulkd, thanks :)