X-browser "wet floor" image reflection
A cross-browser (IE6+) image reflection technique using only HTML and CSS.
Original: http://jsfiddle.net/Schepp/k7MH2/
HTML
<!--[if lt IE 9]>
<div class="oldie">
<![endif]-->
<h1>A cross-browser (IE6+) image reflection technique using only HTML and CSS.</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p><span class="reflection" style="background-image: url('http://placekitten.com/200/300');">
<img src="http://placekitten.com/200/300" width="200" height="300" />
</span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<!--[if lt IE 9]>
</div>
<![endif]-->
CSS
h1 {
font-size: 2em;
}
.reflection {
display: inline-block;
overflow: hidden;
background-position: left bottom;
vertical-align: baseline;
/* flip vertically */
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
/* needed to have the reflection "fade" to white */
-moz-box-shadow: inset 0 50px 30px -30px #FFF, inset 0 75px 50px -25px #FFF;
-webkit-box-shadow: inset 0 50px 30px -30px #FFF, inset 0 75px 50px -25px #FFF;
box-shadow: inset 0 50px 30px -30px #FFF, inset 0 75px 50px -25px #FFF;
}
.reflection img {
margin-top: 70px;
border-bottom: 1px solid #FFF;
vertical-align: bottom;
/* flip vertically again */
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}
.oldie .reflection {
/* inline-block for IE6 and 7 */
*display: inline;
*zoom: 1;
/* flip vertically and fade to transparent */
filter: flipv alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=80, FinishX=0, FinishY=350);
}
.oldie .reflection img {
/* flip vertically again */
filter: flipv;
}
JavaScript
// Original: http://jsfiddle.net/Schepp/k7MH2/