Image reflection effect using pure CSS

Question

I have an image in <img> 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 JS Fiddle

What I want:
The Fade to Zero opacity from top to bottom on the reflection. Right now it works only in webkit browsers using combination of -webkit-box-reflect and -webkit-gradient.
I want it to work on Mozilla too.

What I have right now:
As it can be seen in the JSfiddle I got it working in the webkit browsers using:

-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)));

I tried the following for Mozilla:

#moz-reflect:after {  
    content: "";  
    display: block;  
    background: -moz-element(#moz-reflect) no-repeat;  
    width: auto;  
    height: 200px;  
    margin-bottom: 100px;  
    -moz-transform: scaleY(-1);  
}

where #moz-reflect is the container div for the <img>.

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.

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.

Update It has to work on custom background which may be an image or black or any other color.

Answer 1

I've changed your code totally, I am using CSS3 gradients with transform property, this is Pure CSS with maximum compatibility.

Here, the key thing I am using is rgba() along with the transform property applied to second img which am targeting using nth-of-type pseudo.

Also, make sure that you have called position: relative; on the parent element because I am using :after pseudo for the gradient overlay from the bottom, so am using position: absolute; for that with the bottom set to 0

Demo (Had made a bit mistake here by using rotate() as it won't give reflection effect, will just rotate the image infact, please refer to my second demonstration)

Demo 2 (Using scale for mirroring images, can use rotateY as well, as pointed out in the comments..)

#moz-reflect:after {
    content:"";
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.67) 49%, rgba(255, 255, 255, 1) 100%);
    /*I've removed proprietary gradient codes from here, you can get it in the demo*/
}

#moz-reflect img:nth-of-type(2) {
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1); 
}

#moz-reflect {
    position: relative;
}

---

Demo 3 (Only difference is, that am using height: 50%; for the :after pseudo so we don't have to hard code it)

Only code to modify in the above block of code is the height property which am setting to 50%

#moz-reflect:after {
    content:"";
    width: 100%;
    height: 50%; /* Changed the unit over here */
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.67) 49%, rgba(255, 255, 255, 1) 100%);
}

---

Note: Inorder to create the gradients best suited, say black opaque gradients will be required for websites with black background, than you can make your own using Color Zilla.

Image reflection, using black as the body background. Only changes in the above snippet of code is that am applying background: #000; to body and I've tweaked the gradient accordingly.

background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.67) 49%, rgba(0, 0, 0, 1) 100%);

Demo (For websites using darker backgrounds, black in this case)

Note: Didn't added proprietary properties for gradient in the black demo