Le immagini giocano un ruolo cruciale nelle pagine web. Contribuendo non solo all'estetica del sito ma anche a catturare l'attenzione degli utenti e migliorare l'esperienza visiva. Con il giusto utilizzo, possono raccontare una storia, trasmettere emozioni e facilitare la comprensione del contenuto. Ma come possiamo rendere le immagini ancora più coinvolgenti? L'animazione, specialmente l'effetto di zoom al passaggio del mouse, è una tecnica semplice ma potente che aggiunge dinamismo e interattività alla pagina.
Effetti hover per creare un'animazione di zoom con CSS
In questa guida verrà utilizzato il linguaggio CSS per creare un elegante effetto di zoom sulle immagini quando l'utente passa il mouse sopra di esse. Questo effetto non solo attira l'attenzione ma può anche contribuire a dare un tocco professionale e raffinato al design del tuo sito web. Migliorando l'interattività senza influire negativamente sulle performance.
Cosa ci serve per creare l'effetto
Innanzitutto, occorre creare la pagina HTML in cui inserire l'immagine da animare. Per creare una struttura di base con HTML, è consigliato partire dalla sezione all'interno della quale inserire i tag principali che servono per configurare correttamente la pagina. Tra questi title per dare un nome alla pagina e link per collegare una pagina di stile CSS.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Effetto Zoom su Immagini</title>
<link rel="stylesheet" href="style.css">
</head>Il resto della pagina riguarda il contenuto da inserire, in questo caso si è scelto di non appesantire troppo il codice, di conseguenza la pagina conterrà un solo un div
image-container
img
<body>
<div class="image-container">
<img src="immagine.jpg" alt="Immagine da zoomare">
</div>
</body>Il codice mostrato sopra riporta il contenuto all'interno del tag ovvero il corpo della pagina HTML. Come indicato precedentemente, esso risulta essere molto ristretto in quanto occorre esclusivamente un div
Il foglio di stile CSS
Una volta completata la struttura della pagina HTML è possibile inizializzare il foglio di stile tramite il CSS:
.image-container {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}Il primo elemento da personalizzare è il contenitore div con classe image-container. Questo viene impostato con una forma rettangolare tramite gli attributi di larghezza ed altezza espressi in px. Poi viene nascosto il valore overflow e settata la sua posizione con la proprietà relative che consente di gestire il posizionamento in modo più reattivo ed efficace.
All'interno del contenitore è presente l'immagine da animare, si prosegue quindi con la sua personalizzazione:
.image-container img {
width: 100%;
height: 100%;
transition: transform 0.3s ease;
}L'attributo img
transform
ease
hover
.image-container:hover img {
transform: scale(1.2);
}La proprietà hover
image-container
scale
Soluzione alternativa (facoltativo)
Grazie all'ampia gamma di attributi e proprietà del linguaggio CSS, è possibile aggiungere numerosi effetti alternativi per rendere l'effetto ancora più dinamico. In questo caso, ad esempio, grazie alle caratteristiche dell'attributo transform è possibile aggiungere una leggera rotazione all'immagine durante l'effetto di zoom. Il codice diventa quindi il seguente:
.image-container:hover img {
transform: scale(1.2) rotate(5deg);
}In questo modo, quando l'utente passa il mouse sopra l'immagine, questa si ingrandirà lentamente creando un effetto di zoom. Ruoterà inoltre leggermente in base al valore indicato all'interno della proprietà rotate.
In questo modo è stato possibile realizzare un'animazione su un'immagine che zooma e ruota quando viene effettuato un passaggio del mouse sopra di essa. Con poche righe di HTML e CSS è stato possibile creare un effetto accattivante e che può essere utilizzato su qualsiasi sito web per migliorare l'esperienza utente e rendere il design più moderno e coinvolgente.
