Ciao a tutti e benvenuti a questa nuova guida su come realizzare un effetto zoom su un’anteprima, o thumb di un’immagine appartenente ad una galleria del vostro sito.
In questa guida utilizzeremo solamente CSS, senza l’utilizzo di framework come Bootstrap o Skeleton.css
L’effetto che otterremo sarà quello di uno zoom animato su l’evento mouse hover (mouse posizionato sopra un’immagine) di un’immagine, come visto nell’esempio a inizio pagina.
Il codice per questo tutorial è disponibile su questa Repository GitHub di Devnews.it, se non volete seguire la guida potete scaricare e utilizzare il codice come volete :)
Cominciamo!
Per prima cosa partiamo dal file HTML: un semplice <div> contenente altri <div> che formeranno le immagini della galleria.
<div id="galleria">
<div class="immagine">
</div>
<div class="immagine">
</div>
<div class="immagine">
</div>
<div class="immagine">
</div>
</div>
Adesso passiamo alla parte principale del tutorial:
.immagine{
background: url("https://images.devnews.it/tutorials/mongodb-mac/thumb-windows.png");
background-size: 120%;
display: inline-block;
width: 22%;
height: 150px;
margin: 10px 1%;
border: 1px solid #ccc;
border-radius: 5px;
}Come potete vedere assegniamo un’immagine di background ai <div>.
Nel mio caso, per scopi illustrativi utilizzo un’immagine per tutti i miei div, ma voi potete assegnare immagini diverse usando gli ID dei vostri <div>
Lo zoom dell’immagine di sfondo è ottenuta con la regola CSS background-size: 120% dove potete modificare il valore della regola a seconda del livello di zoom desiderato.
Le altre regole sono solamente per il posizionamento della galleria. Se volete approfondire o imparare a creare una galleria responsive potete cliccare su: Come creare una Galleria responsive con HTML e CSS.
Per ottenere questo risultato andiamo ad usare il selector :hover sulle immagini della galleria.
.immagine:hover{
cursor: pointer;
background-size: 100%;
}Come potete vedere riportiamo lo zoom a 100% (quindi al livello normale), inoltre cambiamo il puntatore del mouse al tipo “pointer”.
Se ora andiamo a testare la nostra galleria possiamo vedere che lo sfondo cambia zoom, quando andiamo a passare con il mouse sopra alle immagini. Ma senza una transizione, questo effetto risulta piuttosto brutto e troppo meccanico. Possiamo rendere l’effetto più dolce con una semplice regola css:
transition: all 0.2s ease-in-out;Con questa regola specifichiamo di volere una transizione su tutte le regole css (all), con la durata di 0.2 secondi e con inizio e fine morbidi.
Aggiungiamo la regola al set di regole CSS che avevamo in precedenza e otterremo:
.immagine{background: url("https://images.devnews.it/tutorials/mongodb-mac/thumb-windows.png");background-size: 120%;display: inline-block;width: 22%;height: 150px;margin: 10px 1%;border: 1px solid #ccc;border-radius: 5px;transition: all 0.2s ease-in-out; }
Ora abbiamo una galleria con effetto zoom sull’anteprima di immagine. potete trovare il codice competo per questo tutorial su questa repository GitHub di devnews.it, siete liberi di scaricarlo e usarlo nel vostro progetto. In cambio vi chiedo solamente di condividere questa pagina con i vostri amici su Facebook o Twitter, o di metter mi piace alla nostra pagina Facebook Grazie mille e alla prossima :)
