title: css - animation hover effect on background-image
body: <p>I'm trying to add an animation effect on an image used as a <code>background</code> in css.</p>
  <p>Here's the css:</p>
  <pre class="lang-css prettyprint-override"><code>{
    color: inherit;
    text-decoration: none;
    height: 100%;
    width: 100%;
    display: block;
    background: url('http://placehold.it/350x150')no-repeat top center;&quot;
    background-size: cover !important;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -moz-transition: all 0.3s ease-in 0s;
    -ms-transition: all 0.3s ease-in 0s;
  }
  
  a.mf-portfolio-image-container:hover{ 
    background-size: 120% !important;
    //transform: grow(1.072, 1.072);
    //-webkit-transform: scale(1.072, 1.072);
    //-moz-transform: scale(1.072, 1.072);
    //-ms-transform: scale(1.072, 1.072);
  }
  </code></pre>
  <p>Now, on hover, I'm trying to scale the <code>background-size</code> a bit (grown effect) but it's not working.</p>
  <p>All I have is the background increasing in size but without the animation (or anyway, scale it smoothly)</p>
  <p>I've read some articles, but they are all talking about this effect applied not on <code>background-image</code>, but on an image in the HTML.</p>
  <p>here's a quick <a href="https://jsfiddle.net/edrucqjm/" rel="nofollow noreferrer">fiddle</a></p>
  <p>any idea on how to properly achieve this type of effect?</p>