X-browser "wet floor" image reflection

A cross-browser (IE6+) image reflection technique using only HTML and CSS.

by Jens Grochtdreis

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>
Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer Netzhaut erfaßt. Die Zellen werden dadurch in einen Erregungszustand versetzt, der sich über den Sehnerv in dem hinteren Teil Ihres Gehirns ausbreitet. Von dort aus überträgt sich die Erregung in Sekundenbruchteilen auch in andere Bereiche Ihres Großhirns. Ihr Stirnlappen wird stimuliert. Von dort aus gehen jetzt Willensimpulse aus, die Ihr zentrales Nervensystem in konkrete Handlungen umsetzt. Kopf und Augen reagieren bereits. Sie folgen dem Text, nehmen die darin enthaltenen Informationen auf wie ein Schwamm. Nicht auszudenken, was mit Ihnen hätte passieren können, wenn dieser Blindtext durch einen echten Text ersetzt worden wäre.</p>
<!--[if lt IE 9]>
</div>
<![endif]-->

CSS

h1 {
    font-size: 2em;
}
.reflection {
    display: inline-block;
    float: left;
    margin: 0 20px 20px 0;
    
    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;
}

p { margin-bottom: 10px;}

JavaScript

// Original: http://jsfiddle.net/Schepp/k7MH2/