CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2747609
user2747609

Reputation: 331

fade images in and out on mouseover...?

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!

Upvotes: 0

Views: 3615

Answers (3)

Tad Wohlrapp
Tad Wohlrapp

Reputation: 1897

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>

Upvotes: 0

RichieAHB
RichieAHB

Reputation: 2088

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

Upvotes: 2

Mark
Mark

Reputation: 3272

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

Upvotes: 0

Related Questions