title: CSS transform scale breaks image overlay
body: <p><strong>HTML Markup:</strong></p>
  
  <pre><code>&lt;div class="item"&gt;
      &lt;a href="url"&gt;
          &lt;img src="photo.jpg" /&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This CSS zooms the image on hover:</p>
  
  <pre><code>.item a img {
     transition: all 0.2s linear;
  }
  
  .item a:hover img {
     transform: scale(1.05);
  }
  </code></pre>
  
  <p>This CSS adds an overlay on hover:</p>
  
  <pre><code>.item a {
      position: relative;
  }
  
  .item a:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: none no-repeat center center;
      transition: all .3s linear;
  }
  .item a:hover:before {
      background:rgba(0,0,0, 0.5) url('img/zoom.png') no-repeat center center;
  }
  </code></pre>
  
  <p>Each one works fine by itself.  However, when I try to use both bits of CSS, only the zoom works; the overlay is broken.</p>
  
  <p>Simply, how can I write the CSS to combine these two effects?</p>