Come cambiare un'immagine al passaggio del mouse con Divi

Pubblicato: 2018-12-14

Sapere come modificare un'immagine al passaggio del mouse può tornare utile per qualsiasi tipo di sito Web su cui stai lavorando. Inoltre, ti aiuta ad aggiungere un'interazione sottile alle pagine. Puoi, ad esempio, usarlo per dare ulteriore prospettiva alle testimonianze, alle pagine e alle pagine del team. Con le nuove opzioni al passaggio del mouse di Divi, puoi modificare un'immagine al passaggio del mouse utilizzando solo le opzioni integrate. Combinando gli sfondi delle colonne e il filtro di opacità, ci arriverai in pochissimo tempo.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo un'occhiata ai quattro esempi che ricreeremo da zero

immagine al passaggio del mouse

Passaggi generali

Aggiungi nuova sezione

Nella prima parte di questo tutorial, seguiremo alcuni passaggi generali. Questi passaggi generali ci aiuteranno a risparmiare tempo quando ci concentriamo sui primi tre esempi. Apri una pagina nuova o esistente e aggiungi una sezione normale.

immagine al passaggio del mouse

Aggiungi nuova riga

Struttura della colonna

Quindi, aggiungi una nuova riga utilizzando la seguente struttura di colonne:

immagine al passaggio del mouse

Immagine di sfondo della colonna 1

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi un'immagine di sfondo alla prima colonna. Scegli l'immagine che vuoi visualizzare al passaggio del mouse.

Colonna 1 Immagine di sfondo Ripeti: nessuna ripetizione

immagine al passaggio del mouse

Aggiungi immagine alla colonna 1

Carica immagine

Continua aggiungendo un modulo immagine alla prima colonna e carica l'immagine che desideri visualizzare prima del passaggio del mouse.

immagine al passaggio del mouse

Aggiungi il modulo di testo del titolo alla colonna 2

Aggiungi contenuto

Nella seconda colonna, prima avremo bisogno di un titolo Modulo di testo. Vai avanti e aggiungi alcuni contenuti H3.

immagine al passaggio del mouse

Impostazioni del testo dell'intestazione

Quindi, vai alle impostazioni del testo dell'intestazione e apporta alcune modifiche.

Intestazione 3 Carattere: Baloo Tamma
Colore testo titolo 3: #eda96a
Titolo 3: Dimensione testo: 100 px (desktop), 70 px (tablet), 50 px (telefono)
Intestazione 3 spaziatura lettere: -4px

immagine al passaggio del mouse

Intestazione 3 Lunghezza orizzontale dell'ombra del testo: 0,04 em
Intestazione 3 Lunghezza verticale dell'ombra del testo: 0.04em
Intestazione 3 Colore ombra del testo: rgba(0,0,0,0.6)

immagine al passaggio del mouse

Spaziatura

Infine, aggiungi un margine superiore nelle impostazioni di spaziatura.

Margine superiore: 100 px (desktop), 50 px (tablet e telefono)

immagine al passaggio del mouse

Aggiungi modulo divisore alla colonna 2

Mostra divisore

Aggiungi un modulo divisore proprio sotto il titolo Modulo testo nella colonna 2.

Mostra divisore: Sì

immagine al passaggio del mouse

Colore divisore

Cambia il colore del divisore successivo.

Colore divisore: #e25300

immagine al passaggio del mouse

Stili

E seleziona un altro stile di divisore nelle impostazioni degli stili.

Stile divisore: punteggiato

immagine al passaggio del mouse

Dimensionamento

Aumentare il peso del divisore anche nelle impostazioni di dimensionamento.

Peso del divisore: 3px

immagine al passaggio del mouse

Aggiungi il modulo del corpo del testo alla colonna 2

Aggiungi contenuto

Avanti con l'ultimo modulo! Aggiungi un modulo di testo del corpo alla seconda colonna con alcuni contenuti a scelta.

immagine al passaggio del mouse

Impostazioni testo

Modifica le impostazioni del testo in seguito.

Dimensione del testo: 16px
Altezza riga di testo: 2,3 em
Orientamento del testo: giustifica

immagine al passaggio del mouse

Clona sezione due volte

Una volta completati tutti i passaggi generali, clona la sezione che hai creato due volte. Ora avremo una sezione separata per ciascuno dei primi tre esempi.

immagine al passaggio del mouse

Crea Esempio #1

Applica impostazioni aggiuntive al modulo immagine

Opacità predefinita

Iniziamo a creare il primo esempio! L'unica cosa che faremo qui è creare la transizione al passaggio del mouse, senza effetti aggiuntivi. Per farlo, apri il Modulo Immagine e vai alle impostazioni dei filtri. Assicurati che il valore di opacità predefinito sia 100%.

Opacità: 100%

immagine al passaggio del mouse

Opacità al passaggio del mouse

Cambia l'opacità al passaggio del mouse.

Opacità: 0%

immagine al passaggio del mouse

transizioni

Infine, crea una transizione graduale aumentando la durata della transizione.

Durata della transizione: 1200 ms

immagine al passaggio del mouse

Crea Esempio #2

Applica impostazioni aggiuntive al modulo immagine

Spaziatura predefinita

Al secondo esempio! Apri il modulo immagine nella colonna 1 e assicurati che non ci siano spazi interni personalizzati predefiniti.

immagine al passaggio del mouse

Spaziatura al passaggio del mouse

Continua aggiungendo un po' di imbottitura inferiore al passaggio del mouse per consentire all'immagine al passaggio del mouse di aumentare di dimensioni.

Imbottitura inferiore: 100 px

immagine al passaggio del mouse

Scatola ombra

Stiamo anche aggiungendo un'ombra di casella predefinita che scomparirà al passaggio del mouse.

Posizione orizzontale dell'ombra del riquadro: -55px
Posizione verticale dell'ombra del riquadro: -50 px
Forza di diffusione dell'ombra della scatola: -10px
Colore ombra: #eda96a

immagine al passaggio del mouse