title: CSS Background image size transition
body: <p>I am working on a simple markup with resizing a div's background img.
  See the fiddle:</p>
  
  <p><a href="http://jsfiddle.net/zeYZL/" rel="noreferrer">http://jsfiddle.net/zeYZL/</a></p>
  
  <p>I need this to be animated with a simple CSS transition.
  and I tried doing this:</p>
  
  <pre><code>#tile:hover {
      background-size:550px 550px;
      background-position:-50px -50px;
      transition:all 0.5s ease;
      -webkit-transition:all 0.5s ease;
      -o-transition:all 0.5s ease;
      -moz-transition:all 0.5s ease;
  
  }
  </code></pre>
  
  <p>But then the background image clips upon the hover. (See <a href="http://jsfiddle.net/5Hm9u/" rel="noreferrer">http://jsfiddle.net/5Hm9u/</a>)</p>
  
  <p>Any tips on how to fix it?</p>
  
  <p>Greetings, Chris</p>