I need to be able to fade in a second image above the initial image on hover. I need to make sure that second image isn't visible initially until it fades in. The other important note is that neither of the images should fade out entirely at any time. I've tried several approaches such as using 1 image, 2 images, jquery animate and css transition.

I've read that it is possible to animate a change of attribute using jquery? If this is true, how could I animate the change of 'src' in img using jquery?

$(".image").mouseenter(function() {
        var img = $(this);
        var newSrc = img.attr("data-hover-src");

        img.attr("src",newSrc);
        img.fadeTo('slow', 0.8, function() {
            img.attr("src", newSrc);
        });
        img.fadeTo('slow', 1);
}).mouseleave(function() {
        var img = $(this);
        var newSrc = img.attr("data-regular-src");

        img.fadeTo('slow', 0.8, function() {
            img.attr("src", newSrc);
        });
        img.fadeTo('slow', 1);
});

This is what i'm currently using. It's the closest i've gotten. But you can see the image change which is not desirable.

I need to be able to fade in a second image above the initial image on hover. I need to make sure that second image isn't visible initially until it fades in. The other important note is that neither of the images should fade out entirely at any time. I've tried several approaches such as using 1 image, 2 images, jquery animate and css transition.

I've read that it is possible to animate a change of attribute using jquery? If this is true, how could I animate the change of 'src' in img using jquery?

$(".image").mouseenter(function() {
        var img = $(this);
        var newSrc = img.attr("data-hover-src");

        img.attr("src",newSrc);
        img.fadeTo('slow', 0.8, function() {
            img.attr("src", newSrc);
        });
        img.fadeTo('slow', 1);
}).mouseleave(function() {
        var img = $(this);
        var newSrc = img.attr("data-regular-src");

        img.fadeTo('slow', 0.8, function() {
            img.attr("src", newSrc);
        });
        img.fadeTo('slow', 1);
});

This is what i'm currently using. It's the closest i've gotten. But you can see the image change which is not desirable.

• javascript
• jquery
• html
• css
• image

• 1 What did you try? Do you have any code to show us? – William Barbosa Commented Jul 17, 2014 at 0:42
• 2 Just float two divs on top of each other and fade one on hover. – ssergei Commented Jul 17, 2014 at 0:42
• 1 Is this what you're looking for? jsbin./fepegoce/1/edit – Hashem Qolami Commented Jul 17, 2014 at 1:05
• You've mentioned that neither of the images should fade out entirely. Does that mean that at the final state there should still be a hint of the initial image and before the hover a hint of the final image? Or should there only be one image visble at the end points of the fade? – Jon P Commented Jul 17, 2014 at 1:34
• Meaning I don't want the initial image to go opacity:0, then the image changes, then the new image goes to opacity:1. I want it to be a fluid motion. – Josh Commented Jul 17, 2014 at 1:52

1 Answer 1

Using a single html element with background images

HTML - doesn't get simpler than this

<div id="imgHolder"></div>

CSS

#imgHolder {
    width: 200px;
    height: 200px;
    display: block;
    position: relative;
}

/*Initial image*/
 #imgHolder::before {
    content:"";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    background-image:url(http://placehold.it/200x200);
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    z-index:10;
}

#imgHolder:hover::before {
    opacity:0;
}

#imgHolder::after {
    content:"";
    background: url(http://placehold.it/200x200/FF0000);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

Demo

OR if you want to use image tags...

Stealing straight from: http://css3.bradshawenterprises./cfimg/

HTML

<div id="cf">
  <img class="bottom" src="pathetoImg1.jpg" />
  <img class="top" src="pathetoImg2.jpg" />
</div>

CSS

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

There are many other examples in the link as well to play with, but this will get you started.

Final Opacity

You've mentioned you don't want the initial image to disapear letely. To do this change opacity:0 to opacity:0.5 or something similar. You'll need to experiment with that value to get the result you want.

Demo with final opacity of 0.8

Dynamic Image Sizes

I think you will be stuck with the two image version for this if just using CSS. HTML is the same.

CSS

#cf {
    position:relative;
}

#cf img {
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#cf img.bottom {
    z-index:-1;
    opacity:0;
    position:absolute;
    left:0;
}

#cf:hover img.top {
    opacity:0.8;
}

#cf:hover img.bottom {
    display:block;
    opacity:1;
}

Demo