Add transition while changing img src with javascript

Question

I have an img tag that I want to change the src when hover and it all works but i would like to add some transition so it doesn't look so rough but since it's an img src i cant target it with css.

http://jsfiddle.net/Ne5zw/1/

html

<img id="bg" src="img/img1.jpg"> <div onmouseover="imgChange('img/img2.jpg'); "onmouseout="imgChange('img/img1.jpg');"> 

js

function imgChange(im){ document.getElementById('bg').src=(im); } 

Answer 1

You want a crossfade. Basically you need to position both images on top of each other, and set one's opacity to 0 so that it will be hidden:

<div id="container">     <img class="hidden image1" src="http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg">      <img class="image2" src="http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg" /> </div> 

CSS:

.hidden{  opacity:0;    }  img{     position:absolute;     opacity:1;     transition:opacity 0.5s linear; } 

With a transition set for opacity on the images, all we need to do is trigger it with this script:

$(function(){     debugger;     $(document).on('mouseenter', '#hoverMe', function(){         $('img').toggleClass('hidden');     }); }); 

http://jsfiddle.net/Ne5zw/12/

Answer 2

Here is a pure css solution using css transition. You can use a div as the container and set the background-image on hover.

.image-container {    background: url(http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image) center center no-repeat;    background-size: contain;      width: 150px;    height: 150px;      -webkit-transition: all .3s ease-in-out;    -moz-transition: all .3s ease-in-out;    transition: all .3s ease-in-out;  }    .image-container:hover {    background-image: url("http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image");  }

<div class="image-container"></div>