BlogTema DiviCome inserire immagini a scorrimento al passaggio del mouse

Come inserire immagini a scorrimento al passaggio del mouse

In questo post ti spiego come far scorrere un’immagine al passaggio del mouse e creare un effetto originale. Un ottimo modo per mostrare modelli web e immagini sul tuo sito Divi.

Mi ricordo di aver visto per la prima volta questo effetto su un altro sito e visto che mi piaceva, ho deciso di replicarlo.

Ecco il risultato finale.

iMac screen mockup

1. Prepara l’immagine a cui applicare l’effetto

Scarica l’immagine del mac e apri la pagina o post in cui inserire l’effetto di scorrimento.

Immagine Mac Scorrimento

2. Imposta immagine di sfondo del modulo

Apri le impostazioni del modulo immagine e vai su Sfondo.
Qui puoi caricare uno screenshot della tua pagina Web, un’immagine verticale e lunga, adatta allo scorrimento.

Imposta sfondo

3. Aggiungi una classe al modulo immagine

Apri le impostazioni del modulo immagine e vai su Avanzate > ID e Classi CSS. Aggiungi la classe hover-scroll-effect.

Immagine Mac Scorrimento

4. Aggiungi un frammento di codice CSS

Apri le impostazioni di Divi > Opzioni Tema> Avanzate > Personalizza CSS e incolla il codice riportato di seguito. In alternativa, puoi incollare questo codice anche nelle impostazioni della singola pagina.

.et_pb_image.hover-scroll-mockup {
background-position: center 15px; /* You might have to adjust the number part to fit the screen */
border-radius: 10px; /* Because Mac edges are chamfered */
background-size: cover;
position: relative;
-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
transition: all 3s ease-in-out; }
.et_pb_image.hover-scroll-mockup:before {
content: “”;
display: block;
background: white;
position: absolute;
width: 100%;
height: 30%; /* this should be the height of the stand + chin of the iMac */
bottom: 0;
left: 0; }
.et_pb_image.hover-scroll-mockup:hover {
background-position: center 110%; /* Again, here, if the bottom doesn’t align properly, adjust the second value a little bit */
-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
transition: all 3s ease-in-out; }

Impostazioni articolo

In conclusione

Spero che la guida su come creare un effetto di scorrimento sulle immagini del tuo sito Divi sia stata di tuo piacimento. Per favore, lascia un commento e facci sapere che ne pensi e se ce l’hai fatta! 😀

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *


Divi Design Studio rende semplice l’evoluzione digitale di aziende ambiziose.

Mi occupo di Realizzazione, Restyling e Gestione Siti WordPress.

Menu

2024 © Divi Design Studio | P.IVA 04891580237 | Privacy Policy

Promozione esclusiva!

Risparmia sulla realizzazione o il restyling di un sito WordPress con l’esclusiva promozione di fine anno! Per tutto il mese di novembre e fino al 16 dicembre, Divi Design Studio ti offre uno sconto del 10% su tutti i servizi.