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 che servirà per contenere l'immagine da animare. Questo avrà una classe CSS chiama image-container che verrà configurata successivamente. All'interno del contenitore verrà inserito un tag img con il percorso dell'immagine (in locale o tramite URL). L'attributo permette di assegnare un testo alternativo e descrittivo della foto che viene mostrato in caso di mancato caricamento dell'immagine.
<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 all'interno del quale riportare l'immagine.
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 consente di assegnare uno stile all'immagine. Quest'ultima avrà una larghezza piena così come l'altezza; in questo modo essa si adatterà completamente al contenitore. Inoltre l'immagine presenta una transizione lenta di tipo transform che consente di assegnare un movimento della durata di 0.3 secondi con effetto ease. Grazie a questa proprietà l'immagine viene animata, ma per poter ottenere un vero e proprio effetto al passaggio del mouse occorre impostare una proprietà di tipo hover come di seguito:
.image-container:hover img {
transform: scale(1.2);
}La proprietà hover che viene aggiunta alla classe image-container ha il compito di assegnare un comportamento specifico all'immagine non appena viene effettuato un movimento con il mouse su di essa. In questo caso l'azione sarà quella di zoommare l'immagine di un valore uguale a quello assegnato nel campo 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.
