Grow your CSS skills. Land your dream job.

Last updated on:

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">
    <img src="http://cdn.css-tricks.com/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. nice effect thank for sharing.

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

  3. 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.

    • 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.

    • 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. Abdelfatah
    Permalink to comment#

    Thanks, It is very useful

  5. 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. Permalink to comment#

    Cool :)

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

    Ashley

  7. 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. 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="http://cdn.css-tricks.com/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. 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. Muito bom mesmo :D

  11. 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. Christoffer Khan
    Permalink to comment#

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

  13. Permalink to comment#

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

  14. 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. Short and sweet. Just the way snippets should be. Thanks!

  16. Permalink to comment#

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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".