Galería de imágenes que se amplían con CSS

Hoy en día todo lo que a diseño y presentación en un sitio web se refiere se hace con estilos CSS, por lo que siempre vienen bien estos trucos para aplicar algún detalle de calidad a nuestra página, claro, respetando los estándares.

Si tienes una galería de imágenes con vistas previas puedes usar este sencillo truco para ir ampliando las fotos al pasar el puntero del mouse por encima. Como utiliza la propiedad overflow, no desarma el diseño del sitio, además es muy veloz.

Galería de imágenes que se amplían con CSS

La idea es partir de imágenes ya ampliadas y luego al darle los estilos las dejamos todas pequeñas, estilo thumbnails, incluso cuadradas, si nos gusta más.

Luego, al pasar el cursor por encima se “amplían” (en realidad vuelven al tamaño original).

Podremos obviamente incluir enlaces en ellas, si nos parece.

Este es un ejemplo, al pasar el cursor por encima de la foto de el medio, el efecto logrado es el siguiente:

Éste es el código usado:

ul#thumbs a{

display:block;

float:left;

width:100px;

height:100px;

line-height:100px;

overflow:hidden;

position:relative;

z-index:1;

}

ul#thumbs a img{

float:left;

position:absolute;

top:-20px;

left:-50px;

}

¿Cómo se entiende el manejo de las fotos? Sencillo, teniendo en cuenta el offset izquierdo y superior, se “oculta” un área determinada:

Para usar varias imágenes, usa esto:

ul#thumbs a img{

float:left;

position:absolute;

top:-20px;

left:-50px;

}

ul#thumbs li#image1 a img{

top:-28px;

left:-55px;

}

ul#thumbs li#image2 a img{

top:-18px;

left:-48px;

}

ul#thumbs li#image3 a img{

top:-21px;

left:-30px;

}

Y para volver visible el overflow al pasar el puntero por encima de la foto:

ul#thumbs a:hover{

overflow:visible;

z-index:1000;

border:none;

}

Haz clic aquí para ver un ejemplo online.

Descarga el archivo con el código desde CSS Globe (clic aquí).