How to Add Reflection Effect On Images Using CSS

I’ve been working on design articles for the past few days and I would like to share one with you in this article which is based on Photoshop but the twist is that we’ll not use PhotoShop to achieve this effect, rather use simple and pure CSS to achieve it – Reflection Effect On Images. Before we dive into the actual tutorial, let me show you the final product – refer to the image below.

Interesting… Isn’t it? Without wasting your time, let me start with the tutorial. I’ll split the tutorial into two parts – HTML and CSS. We’ll first add the HTML part on our template/theme. Later, we’ll style the same to achieve the end result as shown in the screen shot above.

HTML

Just paste the following code anywhere on your template/theme – be it blogger or WordPress.

<div class="image-block">
   <img src="http://www.shoutmeloud.com/wp-content/uploads/2011/08/Watch.jpg?4a2793" />
   <div class="reflection">
      <img src="http://www.shoutmeloud.com/wp-content/uploads/2011/08/Watch.jpg?4a2793" />
      <div class="overlay"></div>
   </div>
</div>

I guess there’s nothing much to explain about the codes mentioned above, except that you need to replace the value of src attribute present within the img tags with that of your image URL. Do note that I’ve used an image of dimensions 78x120px. So, make sure you use the same. If not, make the corresponding changes with the width and height when you define the CSS for the same.  Well, that’s it! Save your theme/template.

CSS

WordPress users need to add the following codes to their custom.css file and upload the same to your host servers while users on blogspot should add the codes just above in your template and save them. That’s it!

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

As mentioned earlier, if your image dimensions are different from the default values used in the code above, then change the width and height for the class “overlay”. Similarly, change the width for the class “image-block”. That’s it! Don’t forget to save the changes you made!

Well, I guess the article seems to be very simple and easy to install. Isn’t it? However, there’s one small disadvantage with the above effect. It appears little different when viewed via IE. The effect is still visible but a little blackish. Nevertheless, it works perfectly fine on other major browsers. So, try the above effect and let me know your opinions via comment!

Article by Mukund

Mukund has written 35 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

Follow @ShoutMeLoud