title: css background zoom with fade in effect
body: <p>Using the following zoom in effect from here <a href="https://codepen.io/dragoeco/pen/ibrzK" rel="nofollow noreferrer">https://codepen.io/dragoeco/pen/ibrzK</a> </p>
  
  <p>need some assistance with getting a background image fade in with zoom effect on hover like the one here <a href="http://fantasy.co/work" rel="nofollow noreferrer">http://fantasy.co/work</a> keeping the foreground logo same.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.image-box{
    width:300px;
    overflow:hidden;
  }
  .image {
   width:300px;
    height:200px;
   background: url("http://lorempixel.com/300/200");
   background-position:center;
   transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
  } 
  .image:hover {
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5); /* IE 9 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; /* IE8 */
     filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); /* IE6 and 7 */ 
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="image-box"&gt;
    &lt;div class="image"&gt;
    &lt;/div&gt;
  &lt;/div&gt;  </code></pre>
  </div>
  </div>
  </p>