Creare effetto speciale di hover sul modulo persona di Divi

Come creare un simpatico effetto di animazione all'hover del mouse sul modulo persona di 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

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!

6 risposte

  1. Gentilissimo, grazie mille per la condivisione di questa risorsa che nel mio caso è stata utilissima. Posso chiederti soltanto come posso sostituire le icone di Linkedin e Google+ con quelle di Instagram e del mio sito personale?

    Mille grazie

    1. Ciao Cristiana, prego!
      Per avere più flessibilità con le icone dei social network, ti consigliamo di usare il modulo “Segui social media”, se lo posizioni sotto a ogni modulo persona puoi inserire Instagram e volendo anche il link al tuo sito selezionando RSS tra le opzioni disponibili.
      Speriamo questa soluzione possa aiutarti e ti auguriamo un buon lavoro con Divi!

  2. 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?

Lascia un commento

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

Ti è stato di aiuto?

Condividi questo post con i tuoi amici!

Il corso completo per imparare a creare siti professionali con WordPress e il tema Divi, in offerta lancio con sconto del 70%! • Accesso lifetime • Aggiornamenti inclusi.
Accedi alla nostra formazione completa su Divi con il bundle Divi 360: 5 corsi online completi in offerta speciale con sconto del 50%! • Accesso lifetime • Aggiornamenti inclusi.

CYBER MONDAY

Ultime 12 ore di sconto del 50% su tutti i corsi di Imparaqui.

Scrivi la tua recensione su Imparaqui!
Ti piacciono i nostri corsi?

Facci sapere! Siamo curiosi di leggere il tuo feedback sui corsi che hai seguito e sulla tua esperienza sul sito!

N.B. Il modulo sopra stante può essere usato unicamente per inviare recensioni su Imparaqui e i corsi. Inviando la recensione accetti che la stessa, corredata del tuo nome (senza cognome) e eventuale immagine Gravatar, possa comparire eventualmente in altre parti del sito e/o sui canali social di Imparaqui.