Galería de imágenes usando CSS

El otro día vi en CSSplay una galería de imágenes usando sólo CSS, es bastante sorprendente. Me picó la curiosidad (y eché un vistazo a su código) así que después de teclear un rato, he hecho algo parecido, aunque sin ese segundo nivel de aumento, es decir, mucho más sencillo.

El ‘truco’ está en crear una capa que se active cuando se hace mouse over, es decir, cuando pasamos el puntero del ratón sobre un elemento.

.thumb:hover span {
          background-color: #333;
          visibility: visible;
          right: 0;
          top:  150px;
          left: 0px;
          z-index: 50;
          margin: 0 auto;
          width: auto;
}

Fijaos en el atributo visibility, en la clase de arriba está como visible.

.thumb span {
          position: absolute;
          top: 150px;
          left: -1000px;
          visibility: hidden;
          color: #fc7;
          font-family: "Andale mono", "Trebuchet MS", sans-serif;
          font-size: 12px;
          border-bottom: 1px dashed #666;
}

Aquí, sin embargo, visibility está como hidden, es decir que no se muestra, está oculto. Así que dependiendo de si se pasa el puntero del ratón por encima de un elemento o no, se mostrará una capa u otra.

Podéis verla en funcionamiento aquí. Y por supuesto os podéis descargar la galería completa para investigar / romper / copiar / modificar el código 🙂

PD Debería funcionar bien en todos los navegadores decentes, cumple con los estándares XHTML y CSS, pero no te me quejes si usas el Internet Explorer, eso ya no es culpa mía 😛