Esta es una forma sencilla de agregar un efecto de reflejo en las imágenes, desarrollada por xhtml-lab.com. Está basada en algo simple, repetir las imágenes e invertir la de abajo usando para eso, la propiedad transform y, eventualmente, el filtro flipv en las versiones anteriores a IE9.
Si a esa imagen inferior, se le aplica opacidad, el resultado es algo similar a un reflejo.
Si a esa imagen inferior, se le aplica opacidad, el resultado es algo similar a un reflejo.
Este sería el HTML básico:
<div class="image-block">
<img src="URL_IMAGEN"/>
<div class="reflection">
<img src="URL_IMAGEN"/>
</div>
</div>Y estas las reglas de estilo:
<style>
.image-block {
height: 230px;
overflow: hidden;
width: 200px;
}
.reflection {
position: relative;
}
.reflection img {
opacity: 0.2;
-moz-transform: scaleY(-1); /* Firefox */
-webkit-transform: scaleY(-1); /* Chrome/Safari */
-o-transform: scaleY(-1); /* Opera */
-ms-transform: scaleY(-1); /* IE9 */
transform: scaleY(-1); /* w3c */
filter: flipv alpha(opacity='20'); /* IE8 */
}
</style>En la clase image-block defino width con el ancho de la imagen y height con un valor un poco superior al alto de la imagen para que, aplicando overflow: hidden; este DIV se corte.
En el artículo original, a todo esto se le agrega un DIV extra que se posiciona de modo absoluto sobre la imagen inferior y sobre la que se aplican ciertos filtros extras como gradientes. Esto puede dar cierto trabjo si el fondo no es oscuro pero, puede intentarse y ver qué sale:
En el artículo original, a todo esto se le agrega un DIV extra que se posiciona de modo absoluto sobre la imagen inferior y sobre la que se aplican ciertos filtros extras como gradientes. Esto puede dar cierto trabjo si el fondo no es oscuro pero, puede intentarse y ver qué sale:
<div class="image-block">
<img src="URL_IMAGEN"/>
<div class="reflection">
<img src="URL_IMAGEN"/>
<div class="reflection-over"></div>
</div>
</div>
</style>
reflection-over {
position:absolute;
top: 0;
left: 0;
height: 120px;
width: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)));
filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff);
}
</style>
