PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » jQuery » Fade Image Into Another Image

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="/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();

});

Subscribe to The Thread

  1. Deepak Nigam

    nice effect thank for sharing.

    Reply ↓
  2. James

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

    Reply ↓
  3. Adrian

    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.

    Reply ↓
    • TerranRich

      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.

  4. Abdelfatah

    Thanks, It is very useful

    Reply ↓
  5. Abdelfatah

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

    Reply ↓
  6. Ashley

    Cool :)

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

    Ashley

    Reply ↓
  7. VI

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

    Reply ↓
  8. Anthony

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

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~