title: CSS3 - Fade between 'background-position' of a sprite image
body: <p>I want to fade between 'background-position' of a sprite image <strong>only with CSS</strong>. I found a lot o tutorials but I didn't found something simple like this:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;CSS3 - Fade between 'background-position' of a sprite image&lt;/title&gt;
  &lt;style type="text/css"&gt;
  div{
      width:  120px;
      height: 60px;
  
      background-image:       url('sprite.jpg');
      background-repeat:      no-repeat;
      background-position:    0   0;
  
  }
  div:hover{
      background-position:    0   -60px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you.</p>