How do I animate background image size on hover smoothly in css?
<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>