Elementor: come modificare un'immagine al passaggio del mouse sopra il testo

Vuoi cambiare un'immagine al passaggio del mouse sopra un testo con il Page Builder Elementor ? In questo nuovo tutorial, ti mostreremo come farlo.

Se non hai idea di cosa vogliamo parlare oggi, ti invitiamo a guardare il seguente video:

Quindi torniamo al perché siamo qui.

Scopri anche la nostra guida su:  Come creare una scheda effetto da un portfolio con Elementor

Per completare questo tutorial, avrai bisogno la versione Pro di Elementor, perché utilizzeremo il codice CSS personalizzato che è supportato solo da questa versione diElementor.

Creiamo una sezione con 2 colonne, poi nel pannello laterale definiamo il Hauteur su Altezza minimapoi Altezza minima clicchiamo su VH e imposta il cursore su 100.

Nella scheda Style selezioniamolo Tipo di sfondo it cliquant sur Classico, quindi modificare il colore su# F9F9F9

Nella scheda avanzato, modificare tutti i Margini interni su 25

Ora cambiamo la larghezza della colonna in 40% per la colonna di sinistra e 60% per la colonna di destra.

Nella colonna di sinistra, lasciamo cadere a Widget Editor di testo, quindi incolla un testo al suo interno e modifica il file Dimensione del titolo testo su Titolo 3.

Nella scheda avanzato, inserisci come Margini interni 10-25-10-30 rispettivamente per il margini interni superiore, destro, inferiore e sinistro

Nella sezione sfondo tab avanzato, clicca su PANORAMICA, quindi selezionare il tipo di sfondo su Classico, inseriamolo colore #DFF5FF et Durata della transizione su 0.5.

Se passiamo il mouse sopra il testo, avremo l'opportunità di scoprire un magnifico colore di sfondo al passaggio del mouse.

Passiamo ora alla sezione confinie fare clic su PANORAMICA, quindi selezionare Continua per tipo di bordo et disattiviamo il collegamento tra confine afferrare 4 per confine sinistro. Selezioniamo il colore #002FA7 e aggiungi una durata di transizione a 0.5

Se passiamo con il mouse sopra la nostra casella di testo ancora una volta, vedremo un'animazione più prominente con un bordo a sinistra.

Nella sezione confine, torniamo alla scheda NORMALE, selezioniamo il tipo di bordo attivo Continua, spegniamo la rilegatura tra i bordi, prendiamo 4 per il bordo sinistro e renderlo molto trasparente.

Se passiamo il mouse ancora una volta sul testo, vedremo una transizione molto fluida.

Leggi anche: Come visualizzare il testo sopra un'immagine con Elementor

Duplichiamo questo testo due volte e cambiamo il testo di ciascuno contenuto come questo.

Nella colonna di destra, trascina a Widget immaginee inserisci un'immagine dalla nostra libreria.

Creeremo uno spazio attorno a questa immagine andando a Scheda Avanzate della colonna e immettere 10 – 10 – 10 – 50 per tutti i margini interni di Alto, Destro, Basso e Sinistro.

Selezioniamo l'immagine e nella scheda avanzato di quest'ultimo, andiamo alla sezione Effetti di movimento poi Ingresso Animazione, Selezionare Fade In

Entriamo nella sezione avanzato dalla scheda Avanzate e aggiungi alcuni nomi di classe nel campo Classi CSS. Quindi prendiamo tutto-img img-1

Duplichiamo la nostra immagine 2 volte.

Selezioniamo la seconda immagine e cambiamo img-1 in img-2, quindi cambiamo l'immagine in una nuova immagine.

Vedi anche: Come creare una galleria di immagini con Elementor

Per la terza immagine cambiamo semplicemente img-1 in img-3, quindi cambiamo l'immagine in una nuova immagine.

Selezioniamo la nostra sezione e andiamo alla sua scheda avanzato. Nella sezione CSS personalizzato, copia e incolla il seguente snippet di codice:

selector .all-img{
    display: none;
}
selector .img-1{
    display: block;
}

(Se non hai questa sezione allora non hai la versione Pro, se vuoi continuare devi aggiornare la tua versione).

Selezioniamo il nostro primo editor di testo e andiamo alla scheda Avanzate e al Sezione Attributi. Nel campo attributi, copia e incolla il seguente snippet di codice:

data-showme|img-1

Fallo per altri editor di testo mentre modifichi img-1 in img-2 o img-3

Ora aggiungiamo un widget HTML alla nostra pagina. Copia e incolla il seguente script:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').hover( function(){
        event.preventDefault();
        var showme = $(this).attr('data-showme')
        
        $('.all-img').hide()
        $('.' + showme).show()
        
    })
})
</script>

Ora salva o aggiorna la tua pagina e poi visualizza l'anteprima.

Ecco qua, hai appena svolto questo compito facilmente.

Ottieni Elementor Pro ora!

Conclusione

Ecco ! Questo è tutto per questo articolo che ti mostra come modificare un'immagine passando il mouse sopra un testo. Se hai dubbi su come arrivarci, faccelo sapere all'interno commentaires.

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...