title: Image reflection effect using pure CSS
body: <p>I have an image in <code>&lt;img&gt;</code> tag. My aim is to create a reflection of that image using only CSS.
  It also has to be compatible with all browsers. I tried various ways to do it one of them is in this <a href="http://jsfiddle.net/FWB7K/5/" rel="noreferrer">JS Fiddle</a></p>
  
  <p><strong>What I want:</strong><br>
  The Fade to Zero opacity from top to bottom on the reflection. Right now it works only in webkit browsers using combination of <code>-webkit-box-reflect</code> and <code>-webkit-gradient</code>.
  <br>I want it to work on Mozilla too.</p>
  
  <p><strong>What I have right now:</strong><br>
  As it can be seen in the <a href="http://jsfiddle.net/FWB7K/5/" rel="noreferrer">JSfiddle</a> I got it working in the webkit browsers using:<br></p>
  
  <pre><code>-webkit-box-reflect: below 0px 
  -webkit-gradient(linear, left top, left bottombottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
  </code></pre>
  
  <p>I tried the following for Mozilla:<br></p>
  
  <pre><code>#moz-reflect:after {  
      content: "";  
      display: block;  
      background: -moz-element(#moz-reflect) no-repeat;  
      width: auto;  
      height: 200px;  
      margin-bottom: 100px;  
      -moz-transform: scaleY(-1);  
  }
  </code></pre>
  
  <p>where <code>#moz-reflect</code> is the container div for the <code>&lt;img&gt;</code>. </p>
  
  <p>I'd appreciate answers which can solve the problem with CSS only. There are a lot of images  (Icons) to which this effect has to be applied.<br></p>
  
  <p>If there is no way it can be made to work in Mozilla using just CSS then I wouldn't mind going down the JavaScript road.</p>
  
  <p><strong>Update</strong>
  It has to work on custom background which may be an image or black or any other color.</p>