Implementare un effetto zoom-out con i CSS è semplice.
Partiamo dalla seguente marcatura:
<div class="image-wrap">
<img src="http://lorempixel.com/400/400/animals" alt="" />
</div>
Il contenitore avrà una dimensione inferiore rispetto all'immagine originaria. Quindi useremo le dimensioni dell'immagine e le coordinate del posizionamento contestuale:
.image-wrap {
width: 200px;
height: 200px;
margin: 2em auto;
position: relative;
overflow: hidden;
}
.image-wrap img {
top: -50px;
left: -150px;
height: 400px;
width: 400px;
transition: all 500ms ease-in;
position: absolute;
}
.image-wrap img:hover {
top: 0;
left: 0;
height: 200px;
width: 200px;
}