Pubblicato il

galleria

transition

animazione

css

html

guida

italiana


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:

L’effetto zoom di un’immagine di background di un <div> e la transizione / zoom, su hover.
.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. 

Quindi per ora abbiamo un <div> con un’immagine di sfondo con lo zoom al 120%, ora non ci rimane altro che resettare lo zoom a 100% quando il mouse si trova sopra al <div>.
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  :)

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)