Image Reflection Technique CSS3

.image-block { width:300px; float:left; margin-left:1px; }
.reflection { position:relative; margin-top:-4px; }
.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.50; filter:alpha(opacity='50'); }
.overlay { position:absolute; top:0px; left:0px; width:300px; height:200px;
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)));
filterrogidXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff); }

<div class="image-block">
<img src="3.jpg" />
<div class="reflection">
<img src="3.jpg" height="200" width="300" />
<div class="overlay"></div>
</div>
</div>
<div class="image-block">
<img src="6.jpg" />
<div class="reflection">
<img src="6.jpg" height="200" width="300" />
<div class="overlay"></div>
</div>
</div>

Tagged in:

• reflection css3
• Reflection Technique CSS3
• CSS3 Reflection
• Reflection effect css3