title: jQuery animate background-size property
body: <p>I have the following HTML markup:</p>
  
  <pre><code>&lt;a class="home-page" href="http://google.com"&gt;  
      &lt;section class="col left"&gt;
          &lt;div class="opacity-overlay"&gt;&lt;/div&gt;
          &lt;div class="description"&gt;
              &lt;img src="img/mobile-apps.png" alt="Mobile Application Design and Development"&gt;&lt;br&gt;
              &lt;h1 class="homepage"&gt;
                  Mobile Application &lt;br&gt;
                  Design &amp;amp; Development
              &lt;/h1&gt;
              &lt;p class="homepage"&gt;
                  (iOS — Android — Windows)
              &lt;/p&gt;
              &lt;h1 class="view"&gt;View Projects&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>section.col {
      width:33%;
      height: 100%;
      display: inline-block;
      float: left;
      text-align: center;
      position: relative;
      display: table;
  }
  section.left {
      background: url(../img/left-col-bg.jpg) no-repeat center center ; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  </code></pre>
  
  <p>I need to animate the ZOOM effect on the background image when the <code>section</code> is in <code>:hover</code>. I've tried to use CSS transition but it animates my entire content, not just the background image. So I decided to try jQuery. Here is my code:</p>
  
  <pre><code>$(document).ready(function() {
      $('.col').mouseenter(function(e) {
          $(this).animate({
              "background-size":"120%"
          }, 3000 );
      }).mouseleave(function(e) {
          $(this).animate({
              "background-size":"100%"
          }, 3000 );
      });
  });
  </code></pre>
  
  <p>This doesn't really do the trick as it start animation as if my background was 0% so it doesn't zoom in from the <code>cover</code> state but actually makes it disappear and then zooms to 120%. Any thoughts?</p>
  
  <p>Here is a <a href="http://jsfiddle.net/72zsnzbd/" rel="nofollow">jsfiddle</a> example</p>