Question

At the moment I have this image:

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

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:

• I only want exactly what is shown – a lower section of the image reflecting, NOT the whole image reflecting
• How can I fade the opacity of the reflected image ONLY? the normal one I want to stay the same but fade the reflection
• A cross-browser solution is best (atm I can only do it in chrome)

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

Answer 1

you can do as following :

html :

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