CODEWITHSUNDEEP
imagehtmlcsswebkit
dsgriffin
dsgriffin

Reputation: 68596

Reflecting part of an image using CSS3

At the moment I have this image:

enter image description here

What I've been asked to do is to give it this effect:

enter image description here

Forget about the background color - notice the reflection of part of the image underneath, still the same color but with an opacity-style effect on it.

I have tried using opacity, and webkit-reflection in CSS3 but have had no luck.

I've now taken that code out as it doesn't work, I'm just left with the original image:

.infrareporting_host_0 {
    background: url("../interface/infrareporting/hostLightGreen.png") no-repeat scroll 0 0 transparent;
}

Please remember:

Update

So far my code is reflecting properly in chrome only but opacity is not working correctly. I have this:

-webkit-box-reflect: below -3px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));

Upvotes: 4

Views: 5353

Answers (3)

Behnam Esmaili
Behnam Esmaili

Reputation: 5967

you can do as following :

html :

<div class="image-block">
   <img src="https://i.sstatic.net/mbf9p.png" alt="" />
   <div class="reflection">
      <img src="https://i.sstatic.net/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

Upvotes: 5

Alvaro
Alvaro

Reputation: 41595

You can use CSS 3 for it:

.reflect  { 
  -webkit-box-reflect: below 0
  -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); 
}

Or alternatives like this one: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/cross-browser-css-reflections-glows-and-blurs/

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Use this code:

.infrareporting_host_0::before,
.infrareporting_host_0::after
{
  content: "";
  position: absolute;
  top: 100%;
  z-index: -1;
  width: inherit;
  height: inherit;
  display: block;
}
 
.infrareporting_host_0::before
{
  background: inherit;
}

For more info, see Crossbrowser CSS3 Reflections.

Upvotes: 0

Related Questions