Cómo hacer una galería que se despliegen las imágenes

En el artículo How to Make a Threadless Style T-Shirt Gallery, de BuildInternet, su autor comenta que le llamó la atención una página que comercializa camisetas, por la manera con la que muestra las camisas, la página se llama Type Tees, y trató de imitar esa forma de presentarlas, introduciendo algunos retoques de su propia cosecha (jQuery, CSS, HTML). La esencia, la idea básica es que existe una imagen en miniatura (que da la impresión de ser la camiseta plegada) que es una imagen en tamaño completo en un contenedor div, que es más pequeño que la imagen en tamaño real completo. La imagen está centrada en él, pero no muestra del todo porque está activada (overflow:hidden). Cuando el ratón pasa sobre la miniatura, el overflow:hidden se apagará, y toda la imagen aparece en la pantalla (camiseta desplegada superpuesta). Mejor que mediante las palabras, te puedes hacer mejor una idea con la siguiente vista previa del efecto. De manera gráfica queda como en la siguiente ilustración:

La imagen de superposición se colocan en la parte superior de la miniatura/imagen mientras todo esto está pasando, desapareciendo cuando la imagen completa se muestra una vez que pasa por encima el puntero del ratón. Para la imagen desplegada emplea un archivo PNG semi-transparente. El artículo citado te deja todo lo necesario en cuanto a codificación, una vista previa y la descarga, por lo que el seguirlo en vastante sencillo, las técnicas aprendidas se pueden aplicar en otras situaciones.

Escrito por Toni

Comparte este artículo:

Estas son las categorías a las que pertenece el artículo Cómo hacer una galería que se despliegen las imágenes:

Desarrollo web, Imagen/Ilustración, CSS, Galerías, Diseño Grafico, HTML