title: Zoom Out (scale) image to fit parent without showing background
body: <p>I need to scale or zoom out an image to fill its container, but, I need it to do so smoothly and without showing the yellow background. Is there a way to zoom out like this and not show the background? I am able to do this if I set the keyframes scale from 1 @ 0% to 1.05 @100% but it zooms the image out too much.</p>
  
  <p>Here is my <a href="http://jsfiddle.net/ope432pL/440/" rel="nofollow noreferrer">fiddle</a>.</p>
  
  <pre><code>&lt;div class="bg-contain"&gt;
    &lt;div style="background-image:url(https://www.walldevil.com/wallpapers/a68/back-ground-background-sample-cluster.jpg);" class="bg"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .bg-contain {
     width: 600px;
     height: 600px;
     overflow: hidden;
     background: yellow;
     position: relative;
     display: table;
     overflow: hidden;
  }
  
  .bg-contain div {
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
  }
  
  .bg-contain div:hover {
     animation: zoomout 1s forwards;
  }
  
  @keyframes zoomout {
     0% {
       opacity: 0;
       transform: scale(0.93, 0.93);
     }
  100% {
       opacity: 1;
       transform: scale(1, 1);
     }
  }
  </code></pre>