Image Fade (button)

Updated <M/> 0 300 Views

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; 
}
Member Avatar for ryantroop
ryantroop 177 Practically a Master Poster

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
Member Avatar for <M/>
<M/> 170 Why so serious?

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

Member Avatar for paulkd
paulkd 59 Newbie Poster

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
Member Avatar for ObSys
ObSys 56 Junior Poster

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
Member Avatar for Dani
Dani 4,329 The Queen of DaniWeb

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.

Member Avatar for <M/>
<M/> 170 Why so serious?

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

@paulkd, thanks :)

Edited by <M/>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview