Make a div that is the exact size of the image. This div will have a background image applied to it of the second image. Then put an inline image inside it.
<div id="kitten" style="background-image: url(dog.jpg);">
<img src="/images/kitten.jpg" alt="Kitten" />
</div>Fading the inline image in and out will reveal/hide the second (background) image.
$("#kitten").hover(function(){
$(this).find("img").fadeOut();
}, function() {
$(this).find("img").fadeIn();
});
nice effect thank for sharing.
fadeIn() is not called until after fadeOut has returned, so although simple, it visually leaves alot of room for improvement.
This is horrible. It fades out the first and THEN fadeIn the other one.
You re not doing what you’re saying: fade one image INTO another.
Did you even read the post? The containing DIV has a background image equal to the second image. When you hover over the IMG element, it fades out, displaying the 2nd image (in the form of the container DIV and its BG image). When you mouse-out, the IMG fades back in, covering up the container DIV background, and displaying the first image (IMG element) once again.
All you have to do is repeat the command out to return to the beginning. The person is kind enought to post stuff. Like seriously.
Thank you
Thanks, It is very useful
it doesn’t work , any help plz?
and i want something like you do in the “PROPS” in This Page …. thanx
Cool :)
I’m gonna be using this on my site, thanks :)
Ashley
It’s worth noting that using
.fadeOut()and.fadeIn(), the element will be set todisplay: none;, losing its dimensions. It’s worth just changing the opacity if you’re fading it:$("#kitten").hover(function(){$(this).find("img").animate({opacity: 0}, 500);
}, function() {
$(this).find("img").animate({opacity: 1}, 500);
});
or you can animate the property visibility: hidden; which will continue to take up the space the element took up previously while remaining hidden.
This is what I needed…except I needed it to work on multiple images so I couldn’t use an ID, and I needed the
divto not disappear when hovered on. With the help of @visualidiot on Forrst this is the solution that was contrived:<div class="fade">
<img src="/images/kitten.jpg" alt="Kitten" />
</div>
$(".fade").hover(function(){
$(this).find("img").stop(true,true).animate({opacity: 0}, 400);
}, function() {
$(this).find("img").stop(true,true).animate({opacity: 1}, 400);
});
To increase or decrease the fade time adjust 400 to whatever value suits you (higher is longer, lower is faster).
I use something a little more complex for the same effect on my site http://www.prefektesfest.at. Have a look at the jquery code in the bottom as it works flawlessly with many pictures
Can’t seem to get this to work for me.
I’m seeing the background limage and some sort of fading border but my main image is show as a broken link.
Muito bom mesmo :D
But… its not working please help me, this is my code
$(“#kitten”).hover(function(){
$(this).find(“img”).fadeOut();
}, function() {
$(this).find(“img”).fadeIn();
});
Wow! EXACTLY what i’ve been looking for! Thanks!
Short and sweet. Just the way snippets should be. Thanks!
Why not just in one line fade first image out, and in next line fade second image in. In this way fading in and out happens simultanious without the background trick?
Short and sweet. Just the way snippets should be. Thanks!
Very interesting effect, but watch out for the CPU resources.
The main thing is,, that which picture shout fadeout, and which onw shoul fadein