Cross Browser Image Fade on-off Effect Using Pure CSS3

Published on December 10, 2012

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

Using opiacity

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

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>