Image Reflection Effect Using Pure CSS

Image reflection effect using pure CSS

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

Reflecting part of an image using CSS3

you can do as following :

html :

<div class="image-block">
   <img src="http://i.stack.imgur.com/mbf9p.png" alt="" />
   <div class="reflection">
      <img src="http://i.stack.imgur.com/mbf9p.png" alt="" />
      <div class="overlay"></div>
   </div>
</div>​

css :

.image-block { width:78px; margin:0px 10px; float:left; } 
.reflection { position:relative; } 
.reflection img { 
    -webkit-transform: scaleY(-1); 
       -moz-transform: scaleY(-1); 
        -ms-transform: scaleY(-1); 
         -o-transform: scaleY(-1); 
            transform: scaleY(-1); 
    filter: flipv; opacity:0.20; 
    filter: alpha(opacity='20'); 
} 
.overlay { position:absolute; top:0px; left:0px; width:78px; height:120px; 
    background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%); 
    background-image:   -o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%); 
    background-image:     -webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0))); 
filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff); 
} 

​

check live demo here : demo

How to create mirrored image effect with CSS single element

You can indeed use the pseudo-elements :after and :before to first mirror the image using transform: scaleY(-1); and second overlay the mirrored image with a linear gradient going from a semi-transparent white rgba(255, 255, 255, 0.5) to non-transparent white #fff.

To not being forced to notate the image URL twice, just use background: inherit;.

div {  position: relative;  background: url(https://i.stack.imgur.com/P56gr.jpg) bottom;  width: 300px;  height: 200px;}div:after,div:before {  content: "";  position: absolute;  display: block;  width: inherit;  height: 50%;  bottom: -52%;}div:after {  background: inherit;  transform: scaleY(-1);}div:before {  z-index: 1;  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #fff);}

<div></div>

How to simply create an image reflection effect in JavaScript/CSS?

1. Add an image to your HTML:

<img class="reflect" src="some/image.png" />

2. Add the following CSS rules:

img.reflect {
  width: calc(100% - 20px); /* not sure how else to allow for margin */
  margin-left: 10px;
}

img.reflection {
  position: absolute;
  opacity: 0.4;
  margin-top: 4px;
  width: calc(100% - 20px);
  -webkit-mask-image: -webkit-linear-gradient(transparent 75%, black 100%);
  mask-image: linear-gradient(transparent 75%, black 100%);
  -webkit-transform: translateX(calc(-100% - 10px)) translateY(100%) scaleY(-1) ;
  transform: translateX(calc(-100% - 10px)) translateY(100%) scaleY(-1);
}

If you don't want to rely on any JavaScript you could now simply add the reflection by inserting the reflection tag right after the image tag from (1):

<img class="reflection" src="some/image.png" />

Otherwise

3. For example, extend JQuery with the following function:

$.fn.reflect = function() {
    var reflection = this.clone();
    this.after(reflection);
    reflection.addClass("reflection");
};

4. Then reflect the image:

$(".reflect").reflect();

Animated light reflection on image in Css or Jquery

You can do this with a pseudo element that has a linear-gradient as a background with an animation that moves it across the image.

div {  display: inline-block;  position: relative;}
div:after {  content: "";  position: absolute;  top: -30%;  right: -200%;  width: 50%;  height: 200%;  opacity: 0;  transform: rotate(30deg);  background: rgba(255, 255, 255, 0.13);  background: linear-gradient( to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);  animation: shine 2s 1s;}
@keyframes shine {  to {    opacity: 1;    right: 210%;  }}

<div>  <img src="http://kenwheeler.github.io/slick/img/fonz1.png"></div>

Can images be reflected as a shadow using css?

Yes! You can do this with CSS and filter: blur();

Demo http://jsbin.com/nidekeyajo/edit?html,css,js,output

* {  box-sizing: border-box;  margin: 0;}
img {  height: auto;  max-width: 100%;}
.wrap {  margin: 0 auto;  max-width: 400px;  position: relative;}
.image {  display: block;  position: relative;  z-index: 2;}
.shadow {  bottom: -30px;  filter: blur(20px);/* this is the magic part */  height: 100%;  left: 0;  position: absolute;  transform: scale(0.95);  width: 100%;  z-index: 1;}

<div class="wrap">  <img class="image" src="https://lorempixel.com/800/450/nature/3/" alt="rocky shore">  <img class="shadow" src="https://lorempixel.com/800/450/nature/3/" alt=""></div>

Background image reflection

Here is a jquery plugin that does it:
http://www.digitalia.be/software/reflectionjs-for-jquery

---

Related Topics