Come aggiungere velocemente l’effetto zoom alle immagini nei moduli Divi senza plugin

L’effetto Zoom avanti al passaggio del mouse può essere aggiunto a quasi tutti i moduli Divi che contengono un’immagine. Ci sono due passaggi per applicare l’effetto.

Prima di tutto, aggiungi un nome di classe CSS aggiuntivo al modulo: et-zoom-in

Successivamente, aggiungi il seguente codice al campo CSS personalizzato in Dashboard / Opzioni tema / Impostazioni generali :

.et-zoom-in.et_pb_image:hover img,
.et-zoom-in .et_pb_image_wrap:hover img,
.et-zoom-in a:hover img {
    transform: scale(1.2); 
    transition: all 2s 0s ease;
}

.et-zoom-in,
.et-zoom-in a {
    overflow: hidden;
}

.et-zoom-in.et_pb_image img,
.et-zoom-in .et_pb_image_wrap img,
.et-zoom-in a img {
    transition: all 1s 0s ease; 
}

Se vuoi cambiare leggermente l’animazione, puoi giocare con i valori nel codice. Maggiori informazioni su tutti i parametri qui:

https :// Thoughtbot.com/blog/transitions-and-transforms

vedi l’esempio: la demo