Cambiar el tamaño de las Miniaturas usando la propiedad Css Overflow

CSS

using-overflow.jpg

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

PLAIN TEXT
CSS:
  1. /* single thumbnail */
  2.  
  3.     p.thumb{
  4.         float:left;
  5.         margin:.5em 0;
  6.         margin-right:10px;
  7.         border:1px solid #999; 
  8.         padding:2px;
  9.     }
  10.     p.thumb a{
  11.         display:block;
  12.         float:left;
  13.         width:100px;
  14.         height:100px;
  15.         line-height:100px;
  16.         overflow:hidden;
  17.         position:relative;
  18.         z-index:1; 
  19.     }   
  20.     p.thumb a img{
  21.         float:left;
  22.         position:absolute;
  23.         top:-20px;
  24.         left:-50px; 
  25.     }
  26.    
  27.     /* mouse over */
  28.    
  29.         p.thumb a:hover{
  30.             overflow:visible;
  31.             z-index:1000;
  32.             border:none;       
  33.         }
  34.         p.thumb a:hover img{
  35.             border:1px solid #999; 
  36.             background:#fff;
  37.             padding:2px;           
  38.         }   
  39.    
  40.     /* // mouse over */ 
  41.  
  42. /* // single thumbnail */

Uso

PLAIN TEXT
HTML:
  1. <p class="thumb"><a href="http://xyberneticos.com/"><img src="image.jpg" /></a></p>

Mas info y descarga de ejemplos Create Resizing Thumbnails Using Overflow Property

Compartelo

  1. User Gravatar

    Cambiar el tamaño de la imagen usando la propiedad CSS "overflow" » Cosas sencillas said,

    Wrote on February 21, 2008 @ 4:23

    [...] 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 [...]

  2. User Gravatar

    david_260986 said,

    Wrote on February 23, 2008 @ 12:06

    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

  3. User Gravatar

    Alexandre Pereira said,

    Wrote on February 23, 2008 @ 15:01

    Uma pergunta. Como faço para colocar as fotos centradas no site? Dividido de 3 em 3 fotos. Obrigado

  4. User Gravatar

    Imagenes Miniatura con estilo usando CSS | frogx.three said,

    Wrote on March 5, 2008 @ 13:00

    [...] tip que mencionan en xyberneticos, como mostrar imagenes miniatura o thumbnails con estilo usando CSS, en realidad es muy sencillo al [...]

Seguir comentarios por RSS · TrackBack URI

Nombre: (Necesario)

E-mail: (Necesario)

Website:

Comment: