title: Display different image on hover with transition
body: <p>On the image <code>hover</code>, I want to display a different small image on it with a <code>background</code> and <code>opacity</code> so that the original image is still visible. I want to use the <code>transition</code> to slow the hover effect.
  So here's what I'm trying and not working:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;img src="http://i50.tinypic.com/2poy3kl.jpg" class="test" /&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.test {
     background: red url("http://i50.tinypic.com/10mue4k.png");
     transition: background .25s ease-in-out;
     -moz-transition: background .25s ease-in-out;
     -webkit-transition: background .25s ease-in-out;
  }
  
  .test:hover {
      opacity: 0.5;   
  }
  </code></pre>
  
  <p><strong>JS Fiddle:</strong>
  <a href="http://jsfiddle.net/AXQW4/2/" rel="nofollow">http://jsfiddle.net/AXQW4/2/</a></p>
  
  <p>Can someone please help me with this? </p>