Images Reflection With CSS / Javascript

How to create a images reflection on your web ?

After search and learn by googling. We have two way to make reflection on image. First we can use Javascript or We can using beauty of CSS.

I likes to use CSS, but remember we should have a good CSS for resolving problem by cross browser. Actualy, We can make reflection images by using a CSS function likes “-webkit-box-reflect “,but this is only working on Web Kit browser. This is not good when we working on environment has using other browser (Non Web-Kit). So, if we want using CSS, we should add some CSS function to make the reflection working on all major browser.

How about using Javascript ? on this case, use Javascript is more stable than using CSS. Almost all major Browser has support the Function for make reflection images. But we should remember when we use Javascript of course it will use more resources likes client browser, or system resource. This is okay, and client will be fine open the pages.

CSS or Javasctip ? it’s up to you…

 

View Demo

Download Source from bitbucket

Happy Coding!