Create an easy box reflect with webkit

Image reflection is a cool effect when you want to display images. Before CSS3, this was a painful process to do, specially if you have lots of image to show. This is now a just memories from the past.

Webkit now introduce a new feature call -webkit-box-reflect. This new CSS code will automatically create an image reflection. The negative point is, only Webkit supports it.

CSS Code

div#boxReflect {
  height: 650px;
}
div#boxReflect img {
  -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}

HTML

<div id="boxReflect">
  <img src="http://www.bookofzeus.com/download/tron-legacy-racing-poster.jpg" width="300" height="429" alt="Tron Poster CSS3 Box Reflect" />
</div>

Demo