Trying to fade out image1 and fade in image2 on hover, and then reverse this transition on rollout. Ideas?

Question

I have a logomark.png that I would like to fade/transition to a logotext.png on hover, and then back again on rollout.

As an effect, on hover the logomark.png fades out to 0 opacity while the logotext.png fades up from 0 to 1 opacity.

When the user moves their mouse off the image, it reverses: The logotext.png fades from 1 to 0 opacity, while the logomark.png fades back from 0 to 1 opacity.

Basically, a cross-fade. But because these images have transparent backgrounds, its not as simple as putting one over the other, because both can be seen. It actually has to hide one at all times.

It would also look amazing to add a blur effect during the transition. When going from 0 to 1 opacity, the image has a blur as it fades in to full opacity. Then it has no blur at opacity 1.

Finally, it would be great to be able to adjust the timing of the transition.

Any help would be very much appreciated.

-Thanks

What code do you have so far? It kind of sounds like you just have an idea and want someone to program it for you. — MrOBrian
Not sure what you're asking. You don't want both images to be seen at the same time but you want to 'fade/transition' to the other image... Do you mean you want one to fade completely (or partially) out before you see the other start to fade in? — Weezle
Sorry MrObrian. Didn't mean appear looking for a hand out. I've been at it for hours with little success. I want to start over because the code I was using only addressed putting one image over another, like this method:. Weezle - good question. They start and end at the same time, creating a seamless cross-fade. — user1541535

Paritosh Singh Paritosh Singh · Accepted Answer · 2012-07-20T20:06:32

if you are using jquery then its very easy

$('.img').hover(function(){
$(this).fadeOut(function(){
$(this).attr("src","logotext.png");
$(this).fadeIn();
})},
function(){
$(this).fadeOut(function(){
$(this).attr("src","logomark.png");
$(this).fadeIn()
})})

Trying to fade out image1 and fade in image2 on hover, and then reverse this transition on rollout. Ideas?

1 Answers