• X

    How to Add Reflection Effect On Images Using CSS

    By in Design

    Bluehost hosting

    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.

    refelection effect How to Add Reflection Effect On Images Using CSS

    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" />
       <div class="reflection">
          <img src="http://www.shoutmeloud.com/wp-content/uploads/2011/08/Watch.jpg" />
          <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!

    Get Free Blogging updates in your Email

    Find more Topics based on Keywords

    Article by

    Mukund has written 33 articles.

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

    { 10 comments… read them below or add one }

    AthulExe

    wow its cool, i think it will reduce the image size ie we don’t need to edit pic and make it bulky, Thanks a lot

    Reply

    Vijayraj Reddy

    cool tutorail Mukund, thanks…

    Reply

    Kavya Hari

    It will be looking too good as compared to old images on here. And, it effects would be very nice part on here. Thank you so much for given great post on here :)

    Reply

    KBharath @ HDBloggers

    Thanks for Sharing this Tutorial i have a blogger blog i will try this in that blog.

    Reply

    Mani Viswanathan @ DailyBlogging

    Nice tut Mukund. But I guess most blogs prefer professional looking images rather than these reflection effects and hard borders. But I like the idea :)

    Reply

    Mukund

    @AthulExe: Well, probably you are right! Saves image size to an extent!

    @Vijayraj Reddy: Thanks for the comment buddy:)

    @Kavya Hari: You can add this effect probably to your portfolio page. Might look much better than what it did before. Anyway, thanks for the comment!

    @KBharath: Yes! Sure! Try the same and let me know if you find it easy to install:)

    @Mani Viswanathan: It’s not a compulsion that you make use of this effect. These are just ideas which you may use on a web design blog – unique blog rather than professional blog.

    @shashank chinchli: Yup! Try the same and let me know if you find the effect interesting!

    Reply

    Sandeep Singh

    Awsome share mate ! Surely one to be used by every one.

    Reply

    Jasmeet Singh

    Nice CSS tutorial to generate Reflection effect. Thanks :)

    Reply

    Anne

    If you need to apply the effect to images with different height/width, just set the height and width to 100%. Like this:

    .image-block { width:100%; 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.15; filter: alpha(opacity=’20′); }

    .overlay {
    position:absolute; top:0px; left:0px; width:100%; height:100%; 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); }

    Reply

    D Isaac

    Hi,

    Good topic. To save on modifying markup and leaving content more semantic, the same effect can be done using pseudo elements. For example, if blockA is the container with the image. Then set BlockA to relative positioning. Then blockA::before can be set to position absolute, content: “”, top xx(value where you want shadow or reflection to start), then adjust height, left and right values to suit. Use an inset box shadow for darker background on the pseudo element, border-radius to round it, and set the background-image the same as the real block is using. Then use transform: scaleY(-1) (actually for the squashed reflection I prefer using something like scaleY(-0.4).

    See how it works for you.
    Many thanks,
    Doug

    Reply

    Leave a Comment

    Previous post:

    Next post:

    `