Pure CSS3 Image Reflection - Add a pure CSS3 image reflection to your images.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser
Example: View Code Demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Pure CSS3 Image Reflection</title> <style> /* Begin Pure CSS3 Image Reflection */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: Jaspreet Kaur : http://www.xhtml-lab.com/css/create-reflection-effect-using-css3 : Creative Commons License == */ BODY {margin:0 auto; width:auto; font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);} #content {margin:0px 15px 0px 5px;} /* Theme White */ #gallery-white {width:490px;margin:50px auto 0px;position:relative;overflow:hidden;background:#FFF;padding:0px 50px;border:1px solid #ccc;} #gallery-white h1 {text-align:center;font:20px Arial, Helvetica, sans-serif;margin-bottom:50px;} #gallery-white h1 span {font-size:12px;} #gallery-white .image-block {width:78px;margin:0px 10px;float:left;} #gallery-white .reflection {position:relative;} #gallery-white .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'); } #gallery-white .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); } #gallery-white .vline {position:absolute;bottom:70px;border-bottom:2px solid #666;width:490px;} /* Theme Black */ #gallery-black {width:490px;margin:50px auto 0px;position:relative;overflow:hidden;background:#000;padding:0px 50px;border:1px solid #ccc;} #gallery-black h1 {text-align:center;font:20px Arial, Helvetica, sans-serif;margin-bottom:50px;color:#FFF;} #gallery-black h1 span {font-size:12px;} #gallery-black .image-block {width:78px;margin:0px 10px;float:left;} #gallery-black .reflection {position:relative;} #gallery-black .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'); } #gallery-black .overlay {position:absolute; top:0px; left:0px; width:78px; height:120px; background-image:-moz-linear-gradient(center bottom, rgb(0,0,0) 60%, rgba(0,0,0,0) 75%); background-image:-o-linear-gradient(rgba(0,0,0,0) 25%, rgb(0,0,0) 40%); background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.60, rgb(0,0,0)), color-stop(0.75, rgba(0,0,0,0))); filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000); } #gallery-black .vline {position:absolute;bottom:70px;border-bottom:2px solid #333;width:490px;} /* Common styling for link */ p {text-align:center; font-size:18px; font-family:Arial, Helvetica, sans-serif; padding-top:20px;} a {color:#0000ff; text-decoration:none;} a:hover {color:#007730;text-decoration:underline;} </style> </head> <body> <div id="content"> <div id="gallery-black"> <h1>CSS3 Reflection Demo <span>(Theme Black)</span></h1> <div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book1.jpg" alt="" /> <div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book1.jpg" alt="" /> <div class="overlay"></div> </div></div> <div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book2.jpg" alt="" /> <div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book2.jpg" alt="" /> <div class="overlay"></div> </div></div> <div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book3.jpg" alt="" /> <div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book3.jpg" alt="" /> <div class="overlay"></div> </div></div> <div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book4.jpg" alt="" /> <div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book4.jpg" alt="" /> <div class="overlay"></div> </div></div> <div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book5.jpg" alt="" /> <div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book5.jpg" alt="" /> <div class="overlay"></div> </div></div> <div class="vline"></div> </div> <div id="gallery-white"> <h1>CSS3 Reflection Demo <span>(Theme White)</span></h1> <div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book1.jpg" alt="" /> <div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book1.jpg" alt="" /> <div class="overlay"></div> </div></div> <div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book2.jpg" alt="" /> <div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book2.jpg" alt="" /> <div class="overlay"></div> </div></div> <div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book3.jpg" alt="" /> <div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book3.jpg" alt="" /> <div class="overlay"></div> </div></div> <div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book4.jpg" alt="" /> <div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book4.jpg" alt="" /> <div class="overlay"></div> </div></div> <div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book5.jpg" alt="" /> <div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book5.jpg" alt="" /> <div class="overlay"></div> </div></div> <div class="vline"></div> </div> <h3 align="center">Pure CSS3 3D Drop List Menu Navigation</h3> <p>Roll your cursor over the navigation bar for an example. <br /> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_200.html">Pure CSS3 Image Reflection Code Snippet</a> page. ]</p> <p><a href="http://www.xhtml-lab.com/css/create-reflection-effect-using-css3" target="_new">Click here for tutorial</a></p> </div> </body> </html>