I am using this code to change from one image to another:
<img title="Hello" src="selfie.jpg" onmouseover="this.src='hero_image.png'" onmouseout="this.src='selfie.jpg'" />
I need help with the code so I can slow the transition from one image to the next.
The ideal solution to this would be rendering the two images and changing their opacity instead of changing src for the same tag. Something like :
<div id="container">
<img class="bottom" src="hero_image.png" />
<img class="top" src="selfie.svg" />
</div>
Once you are playing with the opacity, the transition effect can be applied using the following CSS :
#container img {
position:absolute;
left:0;
transition: opacity 1s ease-in-out;
}
#container img.top:hover {
opacity:0;
}