Creare un effetto zoom al passaggio del mouse con CSS

Codice di esempio per creare l’effetto zoom su un’immagine all’interno di una pagina web

Di seguito del codice di esempio per poter creare un effetto zoom su una foto in un sito. Il codice permette di aumentare l’opacità e la dimensione dell’immagine al passaggio del mouse.

Codice html d’esempio per l’inserimento dell’immagine

<div class="image-wrap">
	<img src="https://www.selectallfromdual.com/blog/wp-content/uploads/2020/12/lente-ingrandimento-montagne.jpg">
</div>

Codice css d’esempio per l’effetto zoom

.image-wrap {
	height: 259px;
	width: 400px;
	margin: auto;
	position: relative;
	overflow: hidden;
}

.image-wrap img {
	height: 259px;
	width: 400px;	
	top: 0px;
	left: 0px;
	opacity: 0.5;
	position: absolute;
	transition: all 800ms;
}
.image-wrap img:hover {
	height: 1295px;
	width: 2000px;
	top: -518px;
	left: -800px;
	opacity: 1;
}

Guarda l’esempio su Codewith.

Possiamo centrare l’immagine ingrandita giocando sui valori top e left all’interno della definizione di .image-wrap img:hover. Se avete dimensioni differenti e volete centrarla perfettamente basta fare la differenza tra le due dimensioni e dividerla per due. Il top è calcolato facendo la differenza dell’altezza, mentre il left della larghezza.