CSS3 - 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 creates 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.uidesigner.co.cc/source/tron-legacy-racing-poster.jpg" width="300" height="429" alt="Poster CSS3 Box Reflect" />
</div>

DEMO Image: