Otra galería de imágenes sólo con CSS

En CSSplay nos muestran una técnica bastante particular para generar una galería de imágenes. La llaman Sliding Photograph Galleries y nos enseñan dos modelos, uno vertical y otro horizontal.

Más allá de gustos personales, es muy interesante ver como utilizan las propiedades CSS de manera sencilla, sacándole el máximo provecho.

Todo lo que necesitamos es crear una lista (UL) a la que le colocamos un nombre específico (id="gallery"). Dentro de esa lista, cada item contendrá un enlace con una imagen:

<ul id="gallery">
  <li><a href="#"><img src="URL_imagen1" /></a></li>
  <li><a href="#"><img src="URL_imagen2" /></a></li>
  <li><a href="#"><img src="URL_imagen3" /></a></li>
  <li><a href="#"><img src="URL_imagen4" /></a></li>
  <li><a href="#"><img src="URL_imagen5" /></a></li>
</ul>

Mediante CSS, las imágenes de la lista se mostrarán "comprimidas" y, cuando coloquemos el cursor encima, se ampliarán.

• 
• 
• 
• 
• 

Crear esto, sólo requiere algunas definiciones y un poco de aritmética. Supongamos que vamos a poner 5 imágenes de 480x272 pixeles y que las mostraremos, inicialmente, reducidas a 50x272. El bloque contendrá las cinco imágenes. Una se verá normal y las otras cuatro reducidas así que necesitamos que la altura del bloque sea: 272 + 4 * 50 = 472

<style>
  #gallery {
    height: 472px; /* la altura del bloque */
    list-style-type:none;
    margin:0 auto;
    overflow:hidden;
    padding: 0;
    width: 480px; /* el ancho del bloque es el ancho de la imagen */
  }
  #gallery li {
    float: left;
    padding: 0;
  }
  #gallery li a {
    display: block;
    float: left;
    height: 50px; /* la altura de la imagen comprimida */
    text-decoration:none;
    width: 480px; /* el ancho de la imagen normal */
  }
  #gallery li a img {
    height: 50px; /* la altura de la imagen comprimida */
    width: 480px; /* el ancho de la imagen normal */
  }
  #gallery li a:hover {
    height: 272px; /* la altura de la imagen no-comprimida */
  }
  #gallery li a:hover img {
    height: 272px; /* la altura de la imagen no-comprimida */
  }
</style>

Lo mismo ocurre si queremos hacerlo en el otro sentido. Usamos el mismo código HTML y otro ID para no mezclar las cosas, lo llamamos galleryh y calculamos otra vez.

Pondremos las misma cinco imágenes de 480x272 y las reduciremos a 30 pixeles así que el ancho necesario para contener todo será: 480 + 4 * 30 = 600

<style>
  #galleryh {
    height: 272px; /* la altura del bloque es la altura de la imagen */
    list-style-type: none;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    width: 600px; /* el ancho del bloque */
  }
  #galleryh li {
    float: left;
    padding: 0;
  }
  #galleryh li a {
    display: block;
    float: left;
    height: 272px; /* el alto de la imagen normal */
    width: 30px; /* el ancho de la imagen comprimida */
  }
  #galleryh li a img {
    height: 272px;
    width: 30px; /* el ancho de la imagen comprimida */
  }
  #galleryh li a:hover {
    width: 480px; /* el ancho de la imagen normal */
  }
  #galleryh li a:hover img {
    width: 480px; /* el ancho de la imagen normal */
  }
</style>

• 
• 
• 
• 
•