0

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;
}
starbeamrainbowlabs
  • 5,692
  • 8
  • 42
  • 73
alex
  • 21
  • 3
  • 2
    For these kind of questions, it's best to post a jsFiddle, such as [this one](http://jsfiddle.net/5wwW8/) – JCOC611 Nov 05 '12 at 17:05

1 Answers1

0

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
});
Mike Sweeney
  • 295
  • 2
  • 3
  • 12
  • Make sure you have the jquery library included in your site.... .. and place the above code inside script tags. – Mike Sweeney Nov 05 '12 at 17:29
  • Thank very much Mike! I go to try it;) – alex Nov 05 '12 at 17:35
  • is not possible make it, chanching a bit the css code? It would a easy solution for me. Thanks – alex Nov 05 '12 at 18:30
  • Nah, there's only :hover which will trigger the ON and OFF states. You'll need some sort of javascript to keep the class on there. Are you unable to get this to work? – Mike Sweeney Nov 05 '12 at 19:33
  • yeah, i have tryied but with not results. I have made some error. – alex Nov 06 '12 at 00:46