I have successfully implemented a code that allows for crossfading between images when the mouse hovers over them.
Now, I am looking to modify the behavior so that the crossfade effect happens only once when the mouse passes over the image. In other words, I want just one transition to occur.
The desired sequence:
- Show image 1
- Onmouseover, display image 2
- Onmouseout, revert back to image 1
Here is my current HTML code:
<div id="crossfade">
<img class="bottom" src="images/site3/pasarela1.png" />
<img class="top" src="images/site3/pasarela2.png" />
</div>
And here is my current CSS code:
#crossfade {
position:relative;
height:250px;
width:400px;
}
#crossfade img {
position:absolute;
left:0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#crossfade img.top:hover {
opacity:0;
}