title: CSS Fade Between Background Images on Hover
body: <p>Is there a way that I can do the following?</p>
  
  <p>I have a transparent png sprite that shows a standard picture on the left, and a picture for the :hover state on the right.</p>
  
  <p>Is there a way that I can have the image fade from the left image into the right image on :hover using only css3 transitions? I've tried the following, but it doesn't work:</p>
  
  <pre><code>li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;}
  li{background:url(/img/sprites.png) 0 -50px no-repeat;}
  li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;}
  </code></pre>
  
  <p>Now, the above does animate the background, it pans the image across. What I'd like instead of a pan is a fade or dissolve effect.</p>
  
  <p><strong>UPDATE:</strong> I ended up having to create two elements and just animate the opacities separately. It's a tad messy because I have to specify the exact margins of each element, but I guess it'll work. Thanks for everyones help :)</p>