title: Add transition while changing img src with javascript
body: <p>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. </p>
  
  <p><a href="http://jsfiddle.net/Ne5zw/1/" rel="noreferrer">http://jsfiddle.net/Ne5zw/1/</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;img id="bg" src="img/img1.jpg"&gt;
  &lt;div onmouseover="imgChange('img/img2.jpg'); "onmouseout="imgChange('img/img1.jpg');"&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>function imgChange(im){
  document.getElementById('bg').src=(im);
  }
  </code></pre>