Techumber

Cross Browser Image Fade on-off Effect Using Pure CSS3

Github avatar
Dimpu
December 10, 2012. 1 min read

By using this little trick you can easily create fade in fade out effect very easily. When you combine css Opacity with css transition we could get amazing effect. Now just go a head. Cross Browser Image Fade on-off Effect Using Pure CSS3 demo

Using opiacity

<style type="text/css">
a.opa img {
filter:alpha(opacity=50);
-webkit-opacity:0.5
-moz-opacity: 0.5;
-o-opacity:0.5;
-ms-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

transition: all 3s;
-moz-transition: all 3s;
-webkit-transition: all 3s;
-o-transition: all 3s;
}
a.opa:hover img {
filter:alpha(opacity=100);
-webkit-opacity:1;
-moz-opacity: 1;
-o-opacity:1;
-ms-opacity:1;
-khtml-opacity:1;
opacity:1;
}
</style>

Sample Html

<a class="opa" href="//www.blogger.com/profile/00580458018752018936" style="margin:0 auto;">
<img src="//3.bp.blogspot.com/_4fVBL4fjrFI/Scel64keP1I/AAAAAAAAC1c/qROGCrL9-9U/s320/blogger.png">
</a>

...