Image Reflection Effect Using Pure Css

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

Solution 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-reflectimg: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 bodybackground. 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

Solution 2:

You can also use a single image element along with ::before and ::after, however it's not very useful (yet), since you have to hard-code a background-image:url() for the ::before pseudo-element. I'm posting this answer because someone else may want to do it this way, and hopefully one day we'll be able to use background-image: attr(src, url); syntax. (1) As of June 2014, no browsers support this.

A fiddle: http://jsfiddle.net/DeedH/5/

I'm assuming you have a black background.

Structure:

1. img - main image (actually displayed as a background-image),
2. ::before containing the reflection. Must be display:inline-block in order to use the transform:scaleY to flip the image.
3. ::after containing a gradient mask.

The html: (note that currently the src is not used).

<img class="reflect" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSYXWxD2yC7m2m1ZylyVq_r6yWE4ewJv64cmt3CpgbGdqZq3wEx" />

The CSS:

.reflect {
    position:relative;
    display:block;
    height:300px;
    width:300px;
    background-image:url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSYXWxD2yC7m2m1ZylyVq_r6yWE4ewJv64cmt3CpgbGdqZq3wEx');
    background-repeat:no-repeat;
    background-size:contain;
    content:'';
}
.reflect::before {
    position:relative;
    top:20%;
    height:100%;
    width:100%;
    display: inline-block;
    -moz-transform: scaleY(-.7);
    -o-transform: scaleY(-.7);
    -webkit-transform: scaleY(-.7);
    transform:scaleY(-.7);
    opacity:0.2;
    background-image:url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSYXWxD2yC7m2m1ZylyVq_r6yWE4ewJv64cmt3CpgbGdqZq3wEx');
    background-repeat:no-repeat;
    background-size:contain;
    content:'';
}
.reflect::after {
    position:relative;
    top:-40%;
    height:70%;
    width:100%;
    background-image:-webkit-radial-gradient(top center, 50%75%, rgba(0,0,0,0), rgba(0,0,0,1));
    background-image:-moz-radial-gradient(top center, 50%75%, rgba(0,0,0,0), rgba(0,0,0,1));
    background-image:-o-radial-gradient(top center, 50%75%, rgba(0,0,0,0), rgba(0,0,0,1));
    background-image:radial-gradient(top center, 50%75%, rgba(0,0,0,0), rgba(0,0,0,1));
    background-repeat:no-repeat;
    background-size:contain;
    content:'';
}

Note that you must use content:''; on the img itself, otherwise the pseudo-elements won't display.

Also be aware that this is not really applicable to a class of images because you have to hard-code the image url. But this could be useful if you used it by id and used js to write the rules to a document level stylesheet. Otherwise, this is only helpful for single images.

(1). Using HTML data-attribute to set CSS background-image url