Image Fade (button)

Updated <M/> 0 Tallied Votes 298 Views Share

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; 
}
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
<M/> 170 Why so serious? Featured Poster

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

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
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
Dani 4,074 The Queen of DaniWeb Administrator Featured Poster Premium Member

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 Why so serious? Featured Poster

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

@paulkd, thanks :)

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.