This is just a simple image fade.
This is the HTML:
<a href="#"><img src="#.png" class="fade">
Pretty simple, right?
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;
}
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...
@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.
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.
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.
@ObSys, thanks for the recommendation, i should give that a try :)
@paulkd, thanks :)
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.