CSS transitions CSS transforms and CSS hover animation

CSS transitions CSS transforms and CSS hover animation

One image to another, on hover effect.
First up, the HTML markup. Without CSS enabled, you just get two images. Remember to add alt text for production use.

<div id="cf">  
<img class="bottom" src="http://learn4better.com/images/contact.png" alt="css transform animation" />  
<img class="top" src="http://learn4better.com/images/learn4better_home.jpg" alt="css hover transform annimation" />
</div>

Then Put The CSS Code

#cf 
{  
position:relative;  
height:281px;  
width:450px;  
margin:0 auto;
}
#cf img 
{  
position:absolute;  left:0;  
-webkit-transition:
 opacity 1s ease-in-out;  
-moz-transition: opacity 1s ease-in-out;  
-o-transition: opacity 1s ease-in-out;  
transition: opacity 1s ease-in-out;
}
#cf img.top:hover 
{  
opacity:0;
}
About Author

My name is Mukesh Jakhar and I am a Web Application Developer and Software Developer, currently living in Jaipur, India. I have a Master of Computer Application in Computer Science from JNU Jaipur University. I loves to write on technology and programming topics. Apart from this, I love to travel and enjoy the beauty of nature.

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.