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