Cross Browser Image Fade on-off Effect Using Pure CSS3

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="http://www.blogger.com/profile/00580458018752018936" style="margin:0 auto;">  
<img src="http://3.bp.blogspot.com/_4fVBL4fjrFI/Scel64keP1I/AAAAAAAAC1c/qROGCrL9-9U/s320/blogger.png">  
</a> 

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.