Usando un semplice accorgimento possiamo creare un effetto di zoom sulle immagini con i CSS.
Partiamo dalla seguente marcatura:
<div class="image-wrap">
<img src="http://lorempixel.com/400/400/animals" alt="">
</div>
Usando il posizionamento contestuale e le dimensioni dell'immagine possiamo sfruttare la pseudo classe hover per modificarne i valori. Si noti come il contenitore abbia la dichiarazione overflow: hidden in modo da contenere l'ingrandimento dell'immagine e realizzare l'effetto.
.image-wrap {
width: 200px;
height: 200px;
margin: 2em auto;
position: relative;
overflow: hidden;
}
.image-wrap img {
top: 0;
left: 0;
height: 200px;
width: 200px;
opacity: 0.5;
transition: all 500ms ease-in;
position: absolute;
}
.image-wrap img:hover {
top: -50px;
left: -150px;
opacity: 1;
height: 400px;
width: 400px;
}