Another image on hover

very hot this afternoon . But I keep the spirit to share about the tutorial freebies . I will share how to create image effects is another image on hover. In the tutorial, we use css transition.

Another image on hover is the effect on the image when the cursor changes highlight one image to another.

Live demo

and this is the css code and html:


<style>
#kawaii 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; }
#kawaii img.top:hover {opacity:0;}
</style>


<div id="kawaii">
<img class="bottom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXQm0IHjpCYAdtTkn24I_4Kx4epxz5vAG2IdKXFV4qTEfkYD-57lmuTJw_sYnoJxqZj9lqM3T0RxfvxTsGQtNW8uoUUNurZHIsGHowgdzYYYBPyMSyVQZtsDZ4RH4zTxzxMhyTUzbzudCA/s1600/ash1.gif" />
<img class="top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA7aLGXvT9AK80caSZLNxtzteBHwGRHKgnPvV3_puDZbEjoSHhhQIn59DsRPWLMTcFMMQ93XzHN4Q4gwpn3sBg1nxnlw7hA4oxDujyoYAV4krLODipXpQ3YgaCcnomw0RU9QKjW5qV5wbp/s1600/ash2.gif" /> 
</div>