0

This is just a simple image fade.

This is the HTML:

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

Pretty simple, right?

Edited by pritaeas: Changed to snippet.

.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; 
}

Hi...

5
Contributors
6
Replies
63
Views
4 Years
Discussion Span
Last Post by <M/>
1

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...

Votes + Comments
;)
0

@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.

1

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.

Votes + Comments
Thanks :)
1

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.

Votes + Comments
Good idea
0

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.

0

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

@paulkd, thanks :)

Edited by <M/>

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.