Vuoi creare un'animazione al passaggio del mouse con Elementor ?

In questo tutorial useremo una lattina di pepsi che sorvoleremo e che rivelerà una descrizione a riguardo.

Vi invitiamo a guardare il seguente video per avere un'idea di cosa vogliamo mostrarvi.

crea un'animazione al passaggio del mouse in Elementor

Inserisci una singola sezione di colonna, quindi nella barra laterale seleziona Altezza minima su Hauteur

Sur altezza minima clic VH quindi trascina il cursore su 100. Sempre nella scheda disposizione définir 650 come largeur.

crea un'animazione al passaggio del mouse in Elementor

Seleziona la colonna e sulla barra laterale del campo Allineamento verticale selezionare Mezzo.

crea un'animazione al passaggio del mouse in Elementor

Nella scheda Style, cambia il colore di sfondo facendo clic sul Selettore colore e digita #D37636 poi nella sezione confine, prendiamo 20 per tutti i raggi di cordolo.

crea un'animazione al passaggio del mouse in Elementor

Nella scheda avanzato, disattiva la rilegatura del riempimento e digita 75 per margini interni Haut et Basso et 25 per margini interni Goffo et Diritto.

crea un'animazione al passaggio del mouse in Elementor

Quindi trascina un widget nella colonna sezione interna. Rimuoviamo una delle colonne dalla sezione Interna.

crea un'animazione al passaggio del mouse in Elementor

Nella colonna della restante sezione interna, rilascia il Widget del titolo e cambia il titolo in Pepsi Amore.

Leggi anche la nostra guida su: Come creare una scheda effetto da un portfolio in Elementor

Poi nella scheda Style, dai al testo un colore bianco e per la tipografia imposta il taille su 32, la altezza della riga su 1.2, spaziatura del carattere su 0.5.

Sotto il Widget del titolo, rilascia a Widget Editor di testo e modifica il testo. Nella scheda Style, cambia il colore del testo in bianco e il taille tipografia attiva 16, la altezza della riga su 1.5 espaziatura del carattere su 0.5.

Nella scheda avanzato cambia il margine Basso su all'10 ottobre.

Nella sezione posizionamento tab avanzato, modificare il Larghezza su personnalisé e Larghezza Personalizzata impostare quest'ultimo su 310.

crea un'animazione al passaggio del mouse in Elementor

Sotto il paragrafo aggiungeremo a widget del pulsante con per il testo Per Saperne Di Più.

crea un'animazione al passaggio del mouse in Elementor

Nella scheda Style dai il colore al bottone Bianco e il colore del testo impostalo su Nero.

Ora seleziona la colonna del sezione interna, nella sezione avanzato tab avanzato disattivare il collegamento e fare clic sulla percentuale, quindi impostare il margine Goffo su 20 e nel Margine interno definire quello di Goffo su 20.

Ora trascina il widget di immagini sopra il Sezione interna inserire un'immagine. Abbiamo scelto per l'esempio un'immagine di una bevanda che si trova facilmente sul web.

Una volta inserita l'immagine, configurare il Dimensione dell'immagine su Totale e allineamento clicchiamo su Centro.

Nella scheda avanzato, vai alla sezione Posizione su Larghezza selezionare In linea (automatico)Su Posizione selezionare assoluto e Orientamento orizzontale selezionare Destra poi spostamento entrare all'9.9 ottobre e sul spostamento dell'Orientamento verticale entrare all'105 ottobre.

Vai più in basso Sezione Trasforma definire ridimensionare su 0.5.

Ora seleziona la colonna del Sezione interna e nella scheda avanzato inserire il nome del classi CSS testo pepsi.

Quindi seleziona la nostra sezione principale, vai alla sezione CSS personalizzato della sua Tab Avanzate,  copia e incolla il seguente codice:

/*Hover Animation CSS*/
selector{
    --transition: 0.5s;
    --circle-color: #313F69;
    --content-background: #D27838;
    --mobile-height: 670px;
    --mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
    transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
    content: "";
    background: var(--circle-color);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 20px;
    clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
    clip-path: circle(400px at center);
    background: var(--content-background);
}
selector:hover .elementor-widget-image{
    right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector .pepsi-text{
    opacity: 0;
    visibility: hiddin;
}
selector:hover .pepsi-text{
    opacity: 1;
    visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
    height: var(--mobile-height);
}  
selector .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector:hover .elementor-widget-image{
    right: 68px !important;
    top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-top: -265px !important;
}
}

NOTA: Se non hai questa sezione, devi andare a Versione Pro di Elementor.

Ora se vogliamo rimuovere il colore di sfondo dal testo, selezioneremo la nostra colonna principale e nella scheda Stile disattiveremo il colore di sfondo.

A questo punto, l'animazione verrà eseguita normalmente sul browser.

Anche l'animazione su tablet sembra essere perfetta

Ma su smartphone, non viene visualizzato normalmente. Risolviamo questo problema.

Mostriamo il browser

Nel browser seleziona Sezione (assicurati di essere ancora in modalità smartphone) e abbassa il Larghezza su 320

Quindi seleziona la colonna principale e nella sua scheda Avance, imposta tutti i margini interni su 25

crea un'animazione al passaggio del mouse in Elementor

Nel browser, seleziona l'immagine e nella scheda Style, Cliquez sur PX de Larghezza e impostalo su 180.

Nella scheda avanzato du Widget immaginedai Posizionee selezionare assolutoin spostamento orizzontale entrare 75 ed in spostamento verticale entrare 236. In breve, assicurati di centrare l'immagine al centro del cerchio usando i diversi offset.

crea un'animazione al passaggio del mouse in Elementor

Ora puoi visualizzare in anteprima la tua animazione su diversi dispositivi.

Ottieni subito Elementor Pro!!!

Conclusione

Ecco ! Questo è tutto per questo articolo che ti mostra come creare un'animazione al passaggio del mouse in Elementor. Se hai dubbi su come arrivarci, ci piacerebbe avere tue notizie nel 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.

...