title: How do I animate background image size on hover smoothly in css?
body: <p>I have a div with a background image. On hover, I want the image to zoom in slightly. I have it working (see fiddle) but I want it to animate smoothly over 0.3 seconds and then go back smoothly instead of jumping.</p>
  
  <p>How do I do this?</p>
  
  <p><a href="https://jsfiddle.net/ufgnroor/2/" rel="nofollow">https://jsfiddle.net/ufgnroor/2/</a></p>
  
  <p>HTML</p>
  
  <pre><code>                &lt;div class="portfolio-item"&gt;
  
                  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.portfolio-item {
  height: 300px;
  position: relative;
  text-align: center;
  cursor: pointer;
  margin-bottom: 20px;
  background-position: center;
  background-size: cover;
  background-image: url('http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg');
  }
  
  .portfolio-item:hover {
  background-size: 150%;
  -webkit-transition: all 0.3s ease-in-out;
  }
  </code></pre>