Imágenes con reflejos usando CSS

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.

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:

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