Attenuation between images in a list

Question

I have javascript configured so that when I have an hoverimage, it changes to another image. The only problem is that it is instantaneous. How would I add a transition to this to make it smooth, to fade between 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");
    });
});

Answer 1

You can do this in different ways, but when replacing srcyou cannot fade the same image. You can use two tags imgor even put the image hoveras the background of the tag imgand then put 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>

Run codeHide result

JS , css:

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>

Hide result

Answer 2

css3:

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>

Hide result

Answer 3

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>

Run codeHide result