fade images in and out on mouseover...?

Question

I have the following html and js. It switches from one image to to the other fine. But I'd like the images to fade in and fade out (cross fade? is that the term?). I did a search but haven't been able to adapt the other fade methods into mine for some reason. How can I accomplish this?

<li class="item">
    <a href="/link.html" class="gallery-item">
        <span>
            <img src="/pic1-1.jpg" data-hover="pic1-2.jpg" width="243" height="243" />
        </span>
    </a>   
</li>

Javascript below

$(function () {
    $('.item img').each(function () {
        $(this).data('original', this.src)
    }).mouseenter(function () {
        $(this)
            .attr('src', $(this).data('hover'))
    }).mouseleave(function () {
        $(this)
            .attr('src', $(this).data('original'))
    })

})

Here's a fiddle: http://jsfiddle.net/9qGtv/52/

Thanks!

So you could not get `$(this).stop().fadeTo(500,.5);` to work? Or just with CSS: http://bavotasan.com/2011/a-simple-fade-with-css3/ — epascarello, Jan 23 '14 at 14:27
Do you want fade out -> switch image -> fade in, or do you want one image to fade out at the same time the other fades in? — Jason P, Jan 23 '14 at 14:28
Possible duplicate: http://stackoverflow.com/questions/9745853/how-do-i-make-fade-transition-crossfade — mhu, Jan 23 '14 at 14:30
Nope. It still abruptly changes from one image to the other. And also introduces a weird white overlay. — user2747609, Jan 23 '14 at 14:31
Jason, ideally I'd like one image to fade in at the same time the other fades out. — user2747609, Jan 23 '14 at 14:32
You mean in and out in one function or Mouse over = In, Mouse out = Out — Night, Jan 23 '14 at 14:33

score 2 · Answer 1 · answered Jan 23 '14 at 14:36

http://jsfiddle.net/SuZQ8/

Change your javascript to this. If you would like to have them fade without the pause you will want to have both images present in the DOM as you can't fade the switching of a source;

$(function () {
    $('.item img').each(function () {
        $(this).data('original', this.src);
    }).mouseenter(function () {
        $(this).fadeOut(500, function(){
            $(this).attr('src', $(this).data('hover'));
            $(this).fadeIn(500);
        });
    }).mouseleave(function () {
        $(this).fadeOut(500, function(){
            $(this).attr('src', $(this).data('original'));
            $(this).fadeIn(500);
        });
    });
});

Can the fade in and fade out happen simultaneously? Or can the second image just fade in and out on top of the first? — user2747609, Jan 23 '14 at 16:54

score 0 · Answer 2 · answered Jan 23 '14 at 14:36

Pure CSS

HTML:

<span class="imageContainer">
     <img src="/pic1-1.jpg" width="243" height="243"  class="staticimage" />
     <img src="/pic1-2.jpg" width="243" height="243"  class="hoverimage"/>
</span>

CSS:

.staticimage
{
  position:relative;
  left:0px;
  top:0px;
  transition:1s;
}

.hoverimage
{
  position:relative;
  left:0px;
  top:0px; 
  display:none;
  transition:1s;
}

.imageContainer:hover .staticimage
{
  display:none;
  transition:1s;
}

.imageContainer:hover .hoverimage
{
  display:inline-block;
  transition:1s;
}

score 0 · Answer 3 · answered Mar 06 '18 at 17:26

Although the question is already 4 years old, I thought I'll add my solution. Based on Mark's answer, this is my approach:

.gallery-item {
  display: block;
  position: relative;
  width: 243px;
  height: 243px;
}

.staticimage,
.hoverimage {
  position: absolute;
  transition: all 0.4s linear;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: cover;
}

.hoverimage {
  opacity: 0;
}

.gallery-item:hover .hoverimage {
  opacity: 1;
}

<a href="/link.html" class="gallery-item">
  <div style="background-image: url('https://picsum.photos/250/?random')" class="staticimage"></div>
  <div style="background-image: url('https://picsum.photos/251/?random')" class="hoverimage"></div>
</a>

fade images in and out on mouseover...?

3 Answers3