Creare effetto speciale di hover sul modulo persona di Divi

da | Divi, Temi, Tutorial, Tutorial Divi, WordPress | 4 commenti

Effetto hover mouse modulo persona Divi

Come creare un simpatico effetto di animazione all'hover del mouse sul modulo persona di Divi.

Introduzione

In questo tutorial vediamo come creare un semplice e gradevole effetto di hover sul modulo persona di Divi.

Come vedi nell'immagine potrai ottenere un effetto elegante e originale per poi personalizzare i colori e i contenuti come vorrai.

Dettagli tutorial:

  • Tempo di configurazione: 10 minuti
  • Difficoltà: bassa
  • Scrivi nei commenti per assistenza o domande

Bene, iniziamo subito!

Indice dei contenuti

  • Effetto all'hover del mouse sul modulo persona di Divi
  • Conclusioni e Risorse

Corsi online per imparare a usare WordPress al meglio.

Scopri la Imparaqui Academy

Effetto all'hover del mouse sul modulo persona di Divi

In questo tutorial, andremo ad aggiungere un simpatico effetto grafico sul modulo Persona presente nel nostro tema wordpress Divi.

Per prima cosa, creeremo una nuova pagina, in questa pagina inseriremo una riga a 3 sezioni (potete scegliere voi le sezioni).

Dopodiché, inseriremo il modulo persona compilando tutti i dati (Nome, descrizione, mestiere ecc).ricordando di creare una breve descrizione e di aggiungere una foto.

Fatto questo andremo a inserire il seguente codice CSS.

Il codice CSS potrà essere inserito nella singola pagina attraverso le impostazioni pagina » avanzate » CSS personalizzato, oppure aggiunto di default in tutte le pagine attraverso le impostazioni generali di Divi presenti nella dashboard del nostro sito web, nella casella “aggiungi CSS personalizzato”.

/* Modulo Persona Hover Effect */
.et_pb_team_member.layered-effect {
  overflow: hidden;
  position: relative;
  text-align: right;
  width: 320px;
}

.et_pb_team_member.layered-effect .et_pb_team_member_image {
  margin: 0;
}

.layered-effect *,
.layered-effect *:before,
.layered-effect *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.et_pb_team_member.layered-effect img {
  backface-visibility: hidden;
}

.layered-effect:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-color: #ffcc00;
  opacity: 0.7;
  z-index: 9;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.layered-effect:before {
  -webkit-transform: skew(30deg) translateX(80%);
  transform: skew(30deg) translateX(80%);
}

.layered-effect .et_pb_team_member_description {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 10;
  padding: 20px 20px 20px 40%;
}

.layered-effect .et_pb_team_member_description:before,
.layered-effect .et_pb_team_member_description:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffcc00;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  content: '';
  opacity: 0.5;
  z-index: 8;
}

.layered-effect .et_pb_team_member_description:before {
  -webkit-transform: skew(30deg) translateX(100%);
  transform: skew(30deg) translateX(100%);
}

.layered-effect .et_pb_team_member_description:after {
  -webkit-transform: skew(-30deg) translateX(90%);
  transform: skew(-30deg) translateX(90%);
}

.layered-effect p.et_pb_member_position {
  font-weight: bold;
}

.layered-effect h4,
.layered-effect p,
.layered-effect ul {
  position: relative;
  margin: 0;
  opacity: 0;
  z-index: 11;
}

.layered-effect:hover h4,
.layered-effect:hover p,
.layered-effect:hover ul {
  opacity: 1;
}

.layered-effect:hover:before {
  -webkit-transform: skew(30deg) translateX(30%);
  transform: skew(30deg) translateX(30%);
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

.layered-effect:hover .et_pb_team_member_description:before {
  -webkit-transform: skew(30deg) translateX(50%);
  transform: skew(30deg) translateX(50%);
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.layered-effect:hover .et_pb_team_member_description:after {
  -webkit-transform: skew(-30deg) translateX(40%);
  transform: skew(-30deg) translateX(40%);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
/* Fine codice Hover Effect */

 

Dal codice estrapoliamo la seguente classe CSS: layered-effect e aggiungiamola nelle impostazioni persona>avanzate>ID & Classi CSS nella casella CLASSI CSS.
Fatto questo salviamo e cosi facendo avremo ottenuto il nostro effetto.

Conclusioni

Bene! Da Marco e da Imparaqui è tutto! Scrivi nei commenti se hai delle domande per questo tutorial o se ne vuoi suggerire di nuovi!

Ricorda di dare un'occhiata ai corsi su Divi nella Imparaqui Academy!

A presto e buon lavoro con Divi!

Marco Melis

Marco Melis

Appassionato di Divi e di Elementor, vivo nel cuore della Sardegna e ho un simpatico cane che si chiama Lillo 🙂 Mi piace creare tutorial per imparaqui.it ogni volta che ho l'ispirazione!

Risorse consigliate

Sconti Tema Divi

Risorse WordPress

Imparaqui Academy

Commenta questo articolo

4 Commenti

  1. Enrico

    Ottimo, io lo usato per presentare dei cataloghi. Grazie

    Rispondi
    • imparaqui team

      Prego Enrico! E buon lavoro con Divi da tutto il team di imparaqui!

  2. Martha

    El efecto es bonito pero no me sale completo. Sólo muestra 2 triángulos y por lo que veo han de ser 3. No lo comprendo. Qué me falta?

    Rispondi
  3. Andrea

    Ciao e se invece voglio inserire un semplice testo su un overlay di un'immagine?

    Rispondi

Invia un commento

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

Articoli correlati

Registra un nuovo account affiliato

 

👍

Riceverai una notifica da info@imparaqui.it quando il corso sarà online!

Se hai un abbonamento attivo alla Imparaqui Academy potrai accedere subito al corso.

Un saluto dal team di Imparaqui

Restiamo in contatto 👇