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
