Fading between images in a list

Question

I have some javascript set up so that when I hover an image, it changes to a different image. The only problem is, that it's instant. How would I add a transition to this to make it smooth, to fade between the images?

<div class="social">
    <ul class="sociallinks">
        <li>
            <a href="https://www.linkedin.com/in/lee-jordan">
                <img class="linkedinIcon" src="assets/images/linkedin.png" />
            </a>
        </li>
        <li>
            <a href="https://github.com/loxol">
                <img class="githubIcon" src="assets/images/github.png" />
            </a>
        </li>
    </ul>
</div>

$(document).ready(function() {
    $(".linkedinIcon").hover(function() {
        $(this).attr("src", "assets/images/linkedinhover.png");
    }, function() {
        $(this).attr("src", "assets/images/linkedin.png");
    });
});

Possible duplicate of [How to wait 5 seconds with jQuery?](http://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery) — Tyler, Aug 31 '16 at 14:13
he wants to add a delay to his image fading, the linked question is about creating delays with jquery. Also, a comment on that question talks about the accepted answer being perfect for delays ( http://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery#comment13858205_1836140 ). Putting that aside, a simple google on jquery delays gave up many results... It's unlikely this user has done much research on his specific question. — Tyler, Aug 31 '16 at 14:28
I think you should read the question again. Or at least the title! Timouts and delays will not help. He don't want a delay to fading, he want fading at all! Just tagging a question as duplicate when not understanding the question is not a good idea. @Tyler — eisbehr, Aug 31 '16 at 14:37
@eisbeher He says "How would I add a transition delay to this to make it smooth?" That's talking about delays there... — Tyler, Aug 31 '16 at 14:40
Beside that you still not understand this sentence, where is the `transition` in your duplicate? @Tyler — eisbehr, Aug 31 '16 at 14:41
@eisbehr well for example, in the accept answer it mentions .delay() function and link to the page for that method: http://api.jquery.com/delay/ This page also displays an runnable example with fading, both a wait time and a transitional fade. The OP (of the linked question) also mentions "the success message on the screen fades out" (fades out will often use a transitional delay) — Tyler, Aug 31 '16 at 14:47

eisbehr · Accepted Answer · 2016-08-31T14:39:14.453

You can do it on different ways, but you can't fade the same image when replacing the src. You could use two img tags, or even place the hover image as background of the img tag, and fade out the image on hover using css transitions. Here is one example:

$(function() {
    $(".linkedinIcon").hover(function() {
        $(this).css("opacity", 0);
    }, function() {
        $(this).css("opacity", 1);
    });
});

ul.sociallinks {
  list-style: none;
}
ul.sociallinks a {
  width: 300px;
  height: 200px;
  display: block;
}
ul.sociallinks img {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  transition: opacity 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="social">
  <ul class="sociallinks">
    <li>
      <a href="#" style="background-image: url('http://dummyimage.com/300x200/2e97c7/2e97c7&text=2');">
        <img class="linkedinIcon" src="http://dummyimage.com/300x200/c72cc7/c72cc7&text=1" />
      </a>
    </li>
  </ul>
</div>

Even possible without JS at all, css only:

ul.sociallinks {
  list-style: none;
}
ul.sociallinks a {
  width: 300px;
  height: 200px;
  display: block;
}
ul.sociallinks img {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  transition: opacity 1s;
}
ul.sociallinks img:hover {
  opacity: 0;
}

<div class="social">
  <ul class="sociallinks">
    <li>
      <a href="#" style="background-image: url('http://dummyimage.com/300x200/2e97c7/2e97c7&text=2');">
        <img class="linkedinIcon" src="http://dummyimage.com/300x200/c72cc7/c72cc7&text=1" />
      </a>
    </li>
  </ul>
</div>

score 0 · Answer 2 · edited Aug 31 '16 at 14:52

Here is a plain css3 solution:

ul.sociallinks a img {
  position: absolute;
  top: 0;
  height: 250px;
}
.animate {
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  transition: opacity 1s linear;
}
.changeDisplayOnHover .showOnHover {
  opacity: 0;
}
.changeDisplayOnHover .hideOnHover {
  opacity: 1;
}
.changeDisplayOnHover:hover .showOnHover {
  opacity: 1;
}
.changeDisplayOnHover:hover .hideOnHover {
  opacity: 0;
}

<div class="social">
  <ul class="sociallinks">
    <li>
      <a href="#" class="changeDisplayOnHover">
        <img class="hideOnHover animate" src="https://66.media.tumblr.com/avatar_8107bb8004a8_128.png" />
        <img class="showOnHover animate" src="http://www.aqua-soft.org/forum/uploads/post-25-1229846653.png" />
      </a>
    </li>
  </ul>
</div>

Shariq Hasan Khan · Answer 3 · 2016-08-31T15:46:45.003

2 effects using CSS:

.changeableImage {
 background:url(http://cdn.quotesgram.com/small/94/89/854123786-colorful-nature-wallpaper.jpg);
 display:block;
 width:300px;
 height:200px;
 transition: padding 2s;
 box-sizing:border-box;
 overflow: hidden;
}


.changeableImage:hover{
 padding-top:200px;
}


.changeableBG {
 background:url(http://cdn.quotesgram.com/small/94/89/854123786-colorful-nature-wallpaper.jpg);
 display:block;
 width:300px;
 height:200px;
 transition: padding 2s;
 box-sizing:border-box;
 overflow: hidden;
}
.changeableBG img{
 display:block;
 width:300px;
 height:200px;
 transition: all 2s;
 box-sizing:border-box;
 overflow: hidden;
  position:relative;
}


.changeableBG img:hover{
 transform: translateY(200px);
}

<div class="social">
  <ul class="sociallinks">
    <li>
      <a href="#">
        <img class="changeableImage" src="http://free4kwallpaper.com/wp-content/uploads/nature/Colorful-UHD-4K-Mountains-Wallpaper-300x200.jpg" />
      </a>
      <br>
      <a class="changeableBG" href="#">
        <img  src="http://free4kwallpaper.com/wp-content/uploads/nature/Colorful-UHD-4K-Mountains-Wallpaper-300x200.jpg" />
      </a>
    </li>
  </ul>
</div>

Fading between images in a list

3 Answers3