CODEWITHSUNDEEP
javascriptjqueryhtmlcss
loxol
loxol

Reputation: 83

Fading between images in a list

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

Upvotes: 4

Views: 538

Answers (3)

Shariq Hasan Khan
Shariq Hasan Khan

Reputation: 530

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>

Upvotes: -1

Max Leizerovich
Max Leizerovich

Reputation: 1713

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>

Upvotes: 0

eisbehr
eisbehr

Reputation: 12452

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>

Upvotes: 3

Related Questions