title: Image is hidden by css :before pseudo-element unless opacity is different than 1
body: <p>I tried to set a background color for an image by using a css pseudo-element:</p>
  
  <pre><code>&lt;div class="my"&gt;
      &lt;img src="http://cdn.impressivewebs.com/123rf-jan.jpg"/&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>img {
      height: 100px;
      width: 100px;
  }
  
  .my:before {
      content: "";
      display: block;  
      position: absolute;  
      top: 0;  
      bottom: 0;  
      left: 0;  
      right: 0;  
      background: rgb(0,255,255);  
  }
  
  div {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: red;
  }
  </code></pre>
  
  <p>The only way I managed to make it work is by setting <code>opacity:0.99;</code> or any other value which is not 1. I tried playing with the z-index with no success. This happens in Chrome as well as in Firefox.</p>
  
  <p>Setting <code>opacity</code> to one or leaving it to be default causes the pseudo element to hide the image.
  Here is the fiddle: <a href="http://jsfiddle.net/zfYnu/" rel="nofollow">http://jsfiddle.net/zfYnu/</a></p>