CSS: effetto zoom sulle immagini

Oggi ho trovato un semplice demo che realizzava un effetto di zoom su una galleria di immagini utilizzando jQuery. Ho deciso di ricreare lo stesso effetto usando i CSS e la pseudo-classe dinamica :hover. Vediamo i risultati.

Una marcatura semplice come base:

<div id="gallery">

	<img src="1.jpg" alt="" />
	<img src="2.jpg" alt="" />
	<img src="3.jpg" alt="" />
	<img src="4.jpg" alt="" />
	<img src="5.jpg" alt="" />

</div>

Vogliamo spostare ciascuna immagine di 10 pixel dall'alto e verso destra e aumentare le sue dimensioni. Per questo motivo il contenitore generale dovrà avere dimensioni adeguate:

#gallery {
	width: 950px;
	height: 250px;
	margin: 0 auto;
}

#gallery img {
	float: left;
	margin-right: 20px;
	position: relative;
	cursor: pointer;
}

L'immagine è stata posizionata in modo relativo in modo da permettere lo spostamento. Ecco il codice che crea tale effetto:

#gallery img:hover {
	top: 10px;
	left: 10px;
	width: 200px;
	height: 200px;
	border: 2px solid #d34545;
	padding: 4px;
	border-radius: 5px;
}

Potete visionare l'esempio finale in questa pagina.