Crea zoom immagine con CSS al passaggio del mouse in WordPress

Ciao ragazzi

Oggi vi porto un tutorial molto semplice ma penso che possa esservi molto utile.

Vediamo come possiamo creare un'immagine con lo zoom passando il mouse sopra il mouse come segue:

Videotutorial

La prima cosa che faremo è aggiungere una classe all'immagine in modo da poter applicare lo stile esclusivamente a questa immagine e non a tutte le immagini sul web.

Nel caso del mio sito web sarebbe:

<img class="zoom" src="https://comohacerunapagina.es/wp-content/uploads/2018/05/imagen-aleatoria.jpeg" alt="imagen aleatoria con zoom">

Ora che abbiamo creato la classe, aggiungeremo il CSS, per questo andremo su Personalizza -> Additional Css:

Ecco il codice che ti serve:

.zoom {
    transition: transform .2s; 
}

.zoom:hover {
    transform: scale(1.5); 
}

Il css sopra è composto da due parti:

Zoom immagine

La CSS responsabile di queste parti è la seguente:

.zoom:hover {
    transform: scale(1.5); 
}

Sebbene questo codice renda perfettamente lo Zoom, è molto brusco poiché passa da una posizione all'altra senza stati intermedi.

Passaggio graduale da uno stato all'altro

Per vedere un'animazione fluida tra entrambe le posizioni, aggiungiamo la seguente parte al CSS:

.zoom {
    transition: transform .2s; 
}

Qui gli diciamo di trasformare dalla posizione iniziale a quella finale in 0.2 secondi.

Modificando il tempo si varia la velocità della trasformazione.

Come puoi vedere è molto semplice e può essere molto utile