title: Css Transform: Scale Only Works in Dev Tools
body: <p>I'm trying to achieve a simple :hover effect where the image hovered scales up when hovered. Strangely, when I click the :hover radio button in the "Force element state" in Chrome dev tools, the effect works as expected, but when I actually hover over the image, no dice. Any insight would be much appreciated!</p>
  
  <p>This is my markup (the image has a semi opaque overlay)</p>
  
  <pre><code>&lt;article class="news-loop_item"&gt;
    &lt;img 
      src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-
      s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" class="news-
      loop_img" alt="featured image"&gt;
    &lt;div class="news-loop_overlay"&gt;
      &lt;h2 class="news-loop_title"&gt;Title&lt;/h2&gt;
      &lt;p class="news-loop_date"&gt;Date&lt;/p&gt;
      &lt;div class="news-loop_summary"&gt;Summary&lt;/div&gt;
    &lt;/div&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>And my scss</p>
  
  <pre><code>.news-loop {
    flex-wrap: wrap;
    margin: -1rem;
  }
  
  .news-loop_item {
    flex-basis: calc(100% / 2 - 2rem);
    height: 20rem;
    margin: 1rem;
    overflow: hidden;
    position: relative;
  }
  
  .news-loop_img {
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: relative;
    vertical-align: middle;
    width: 100%;
  }
  
  .news-loop_img:hover {
    -webkit-transform: scale(1.15, 1.15);
    transform: scale(1.15, 1.15);
  }
  
  .news-loop_overlay {
    background: rgba(0, 0, 0, .75);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }
  
  .news-loop_overlay:hover {
    background: rgba(0, 0, 0, .5);
  }
  </code></pre>
  
  <p><a href="https://codepen.io/evanhickman/pen/ZXOmWb" rel="nofollow noreferrer">https://codepen.io/evanhickman/pen/ZXOmWb</a></p>