Fade Image Into Another Image

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();

});

Comments

  1. User Avatar
    Deepak Nigam

    nice effect thank for sharing.

  2. User Avatar
    James

    fadeIn() is not called until after fadeOut has returned, so although simple, it visually leaves alot of room for improvement.

  3. User Avatar
    Adrian
    Permalink to comment#

    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.

    • User Avatar
      TerranRich
      Permalink to comment#

      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.

    • User Avatar
      funkfreaka
      Permalink to comment#

      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

  4. User Avatar
    Abdelfatah
    Permalink to comment#

    Thanks, It is very useful

  5. User Avatar
    Abdelfatah
    Permalink to comment#

    it doesn’t work , any help plz?
    and i want something like you do in the “PROPS” in This Page …. thanx

  6. User Avatar
    Ashley
    Permalink to comment#

    Cool :)

    I’m gonna be using this on my site, thanks :)

    Ashley

  7. User Avatar
    VI
    Permalink to comment#

    It’s worth noting that using .fadeOut() and .fadeIn(), the element will be set to display: 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);
    });

  8. User Avatar
    Anthony
    Permalink to comment#

    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 div to 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).

  9. User Avatar
    P-Zilla
    Permalink to comment#

    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.

  10. User Avatar
    Douglas W. P.
    Permalink to comment#

    Muito bom mesmo :D

  11. User Avatar
    Rajeesh
    Permalink to comment#

    But… its not working please help me, this is my code

    $(“#kitten”).hover(function(){

    $(this).find(“img”).fadeOut();

    }, function() {

    $(this).find(“img”).fadeIn();

    });

  12. User Avatar
    Christoffer Khan
    Permalink to comment#

    Wow! EXACTLY what i’ve been looking for! Thanks!

  13. User Avatar
    Zeeshan
    Permalink to comment#

    Short and sweet. Just the way snippets should be. Thanks!

  14. User Avatar
    Helle
    Permalink to comment#

    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?

  15. User Avatar
    Danish Saifi
    Permalink to comment#

    Short and sweet. Just the way snippets should be. Thanks!

  16. User Avatar
    Tom
    Permalink to comment#

    Very interesting effect, but watch out for the CPU resources.

  17. User Avatar
    Satbir SIngh
    Permalink to comment#

    The main thing is,, that which picture shout fadeout, and which onw shoul fadein

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag