Una bonita técnica destinada a controlar el tamaño de las miniaturas que aparecen en nuestra Web usando la propiedad “overflow”. Básicamente, podremos crear miniaturas, pero el truco esta, en que lo haremos sin cambiar el tamaño de la imagen real, sino más bien, cambiando el tamaño de la zona Visible de la misma.
Ver demos - Mas info y descarga de ejemplos cssglobe
p.thumb{
float:left;
margin:.5em 0;
margin-right:10px;
border:1px solid #999;
padding:2px;
}
p.thumb a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
p.thumb a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
/* mouse over */
p.thumb a:hover{
overflow:visible;
z-index:1000;
border:none;
}
p.thumb a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
/* // mouse over */
/* // single thumbnail */
Uso
Mas info y descarga de ejemplos Create Resizing Thumbnails Using Overflow Property
Loading ...
Cambiar el tamaño de la imagen usando la propiedad CSS "overflow" » Cosas sencillas
21-02-2008
Permalink
[...] empiezo a revisas mi colección de RSS por orden inverso, así que le toca en primer lugar a XYBERNETICOS, donde nos muestra una sencilla y bonita técnica destinada a controlar el tamaño de las [...]
david_260986
21-02-2008
Permalink
Hey, muchas gracias. Es justo lo que andaba necesitando.
Aunque el hecho de que no cambie el tamaño de la imagen, supone que la página tardaría lo mismo en cargar.. [Aunque no me preocupa..].
Muchas gracias por el code. =0)
Saludetes =P
Alexandre Pereira
21-02-2008
Permalink
Uma pergunta. Como faço para colocar as fotos centradas no site? Dividido de 3 em 3 fotos. Obrigado
Imagenes Miniatura con estilo usando CSS | frogx.three
21-02-2008
Permalink
[...] tip que mencionan en xyberneticos, como mostrar imagenes miniatura o thumbnails con estilo usando CSS, en realidad es muy sencillo al [...]