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="pk">
  <img class="bottom" src="http://www.phpkida.com/phpkida1.png" alt="css transform animation" />
  <img class="top" src="http://www.phpkida.com/phpkida2.png" alt="css hover transform annimation" />
</div>

Then Put The CSS Code

#pk {
	position:relative;
	height:281px;
	width:450px;
	margin:0 auto;
	}
	
#pk 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;
	}
	
#pk img.top:hover {
	opacity:0;
	}

Live Demo of CSS transitions CSS transforms and CSS hover animation.