Image Reflection Technique CSS3

by muthu 2014-01-07 11:43:48

Image Reflection Technique CSS3

----------------------------------------------- DEMO ---------------------------------------------------
reflection.jpg
----------------------------------------------- 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)));
filterRazz
rogidVery Happy
XImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff); }

----------------------------------------------- HTML5 --------------------------------------------------

<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>

----------------------------------------------- IMAGES -------------------------------------------------
3.jpg6.jpg
673
like
0
dislike
0
mail
flag

You must LOGIN to add comments