Efecto hover sobre las imágenes

Esta técnica permite agregarle un CAPTION a las imágenes que sólo será visible cuando colocamos el puntero del mouse encima de ella. El efecto es bastante sencillo y sólo requiere HTML y CSS.

» Leer MásEJEMPLO CAPTION 1Praesent mauris urna, congue et semper id, imperdiet eu tellus. Aliquam cursus cursus augue eu pulvinar. Etiam eu pretium erat. Phasellus vel erat nunc. Etiam rutrum interdum lorem, a porta enim fringilla eget.

La única limitación que tendremos es utilizar imágenes de un tamaño más o menos similar para no distorsionarlas. No es necesario que sean todas iguales porque le agregaremos alguna variación al efecto original para que se adapte a distintas posibilidades.

Pondremos las imágenes con este código (si es en una entrada, todo en una sola línea):

<div class="imgteaser">
  <a href="javascript:void(0);">
    <img src="URL_imagen" />
    <span class="more">&raquo; Leer Más</span>
    <span class="desc">
      <strong>EL TITULO</strong>
      ....... el texto a mostrar .......
    </span>
  </a>
</div>

La clave, por supuesto, está en las definiciones CSS, muchas de las cuales son personalizables:

<style type="text/css">
  .imgteaser { /* es el bloque general */
    margin: 0 auto; /* lo centramos */
    overflow: hidden;
    position: relative;
    width:600px; /* establecemos el ancho total (imagen + marco) */
  }
  .imgteaser a {text-decoration: none;}
  .imgteaser a:hover {cursor: pointer;}
  .imgteaser a img { /* la imagen en si misma */
    background-color: #456; /* el color del marco */
    border: none;
    margin: 0;
    padding: 10px; /* le ponemos un marco alrededor */
    width: 580px; /* forzamos el tamaño de la imagen */
  }
  .imgteaser a .more { /* es el área traslúcida de LEER MAS */
    background-color: #123;  /* color de fondo */
    /* las propiedades del texto */
    color: #FFF;
    font-size: 14px;
    padding: 5px 10px;
    /* transparencia */
    filter:alpha(opacity=65); /* IE genérico */
    opacity:.65; /* Firefox */
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)'; /* IE8 */
    /* posicionamos ese texto abajo y a la izquierda sin importar la altura de la imagen */
    position: absolute;
    bottom: 14px;
    right: 10px;
  }
  .imgteaser a .desc {display: none;}
  .imgteaser a:hover .more {visibility: hidden;}
  .imgteaser a:hover .desc { /* es el texto del caption en si mismo */
    background-color:#345; /* color de fondo */
    display: block;
    margin: 0;
    width: 580px; /* ocupará el mismo ancho de la imagen */
    /* las propiedades del texto */
    color: #FFF;
    font-size: 12px;
    padding: 10px;
    /* transparencia */
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
    /* lo posicionamos abajo y a la derecha sin importar la altura de la imagen */
    position: absolute;
    bottom: 14px;
    left: 10px;
  }
  .imgteaser a:hover .desc strong { /* el texto LEER MAS */
    display: block;
    font-size: 14px;
    line-height: 2em;
  }
</style>

» Leer MásEJEMPLO CAPTION 2Quisque sit amet quam diam, in fermentum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vitae nisl enim. Pellentesque et consequat nunc. Suspendisse ac tortor dolor. Donec turpis justo, lacinia at suscipit ac, luctus non leo. Morbi et ante elit. Maecenas quis metus quis ipsum eleifend varius at eget arcu.

REFERENCIAS:The Art of Hand Coding