CSS Crossfade image - html

Question

I have this code that works great. When I pass the mouse over the image it crossfades to another image.
What I want is: when I pass over the mouse the image crossfade and rest like this, I mean, make only 1 transition.
1)image 1
2)onmouseover image 2
3)onmouse out image 2
here my code:
<div id="crossfade">
<img class="bottom" src="images/site3/pasarela1.png" />
<img class="top" src="images/site3/pasarela2.png" />
</div>
here my 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;
}

Answer 1

From what I get is that you want the :hover state to "stick". Though it's not a pure CSS solution, a solid way to handle this is if you are using jquery's .addClass.
$('.yourimage').mouseover(function() { //hover over your image to trigger the event
$(this).addClass('yourAnimationClass'); //add the animation class to the image you hovered over
});