Os mostraremos como aumentar imágenes de  forma sencilla utilizando CSS, más concretamente, por medio la propiedad Overflow.

Empezamos:

1. El código CSS sería así:

img{
		border:none;
	}

/* // general */

/* thumbnail list */

	ul#thumbs, ul#thumbs li{
		margin:0;
		padding:0;
		list-style:none;
	}

	ul#thumbs li{
		float:left;
		margin-right:5px;
		border:1px solid #999;
		padding:2px;
	}
	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;
	}

	/* cursor encima */

		ul#thumbs a:hover{
			overflow:visible;
			z-index:1000;
			border:none;
		}
		ul#thumbs a:hover img{
			border:1px solid #999;
			background:#fff;
			padding:2px;
		}	

	/* // mouse over */

	/* clearing floats */

		ul#thumbs:after, li#thumbs:after{
			content:".";
			display:block;
			height:0;
			clear:both;
			visibility:hidden;
			}
		ul#thumbs, li#thumbs{
			display:block;
			}
		/*  */
		ul#thumbs, li#thumbs{
			min-height:1%;
			}
		* html ul#thumbs, * html li#thumbs{
			height:1%;
			}	

	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;
		}

Se puede ver perfectamente la propiedad overflow actuando. Cuando el cursor no está encima de la imagen, la propiedad overflow se oculta (hidden), y cuando pasamos el ratón por encima, la propiedad overflow se muestra (visible).

2. Nos queda el código HTML. Os mostraremos dos opciones: mediante listas y una sola imagen.

• Mediante listas:

• Una sola imagen:

Tu texto

Se puede ver un ejemplo de su funcionamiento:

Ver ejemplo de su funcionamiento o descargar ejemplo en .ZIP.

Vía | CSSGlobe

Compartir/Guardar