Juan Manuel 4 de junio de 2008 a las 16.12
   Imprimir artículo
elWebmaster.com

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


Galer√≠a de im√°genes que se ampl√≠an con CSSHoy 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:

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

√Č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:

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

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í).


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. paolo dice:

    graxias muy buen efecto, me sirvio para mi web :) que todabia no la termine, jeje. adios…

  2. Jose dice:

    Donde tengo k meterle los codigos estos? gracias.

  3. Juan Manuel dice:

    En la hoja de estilos CSS. ¬°Saludos!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder