Efectos Web: Creación de Miniaturas

Cómo crear miniaturas y mostrar una imagen completa con un fácil y practico truco.

Ejemplo:

/* Listado de miniaturas */

ul, ul li{

margin:0;

padding:0;

list-style:none;

}

ul li{

float:left;

margin-right:5px;

border:1px solid #999;

padding:2px;

}

ul a{

display:block;

float:left;

width:100px;

height:100px;

line-height:100px;

overflow:hidden;

position:relative;

z-index:1;

}

ul a img{

float:left;

position:absolute;

top:-20px;

left:-50px;

}

ul a:hover{

overflow:visible;

z-index:1000;

border:none;

}

ul a:hover img{

border:1px solid #999;

background:#fff;

padding:2px;

}

 

Descarga los archivos base del siguiente link: Creación de Miniaturas