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:
/* single thumbnail */

    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

PLAIN TEXT
HTML:
<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