Avec un peu de CSS on peux faire des choses sympa avec le thème Divi.
Ce tutoriel vous montre comment mettre en place un effet de survol moderne en partant du module Blurb (résumé) de Divi.

Voir la démo

Télécharger la source

Préparer le contenu du module Blurb

On commence par remplir le module avec le contenu que l’on a besoin.

  • Le champs titre
  • le champs de contenu texte
  • l’insertion d’image de la partie « Image et icône »

Vous devriez avoir un rendu de ce genre :

Le css qui va bien

La suite c’est uniquement en CSS.


.dg-bloc-hover_effect {
height: 250px;
background-color: #f92c8b;
}

Je fixe la hauteur du module à 250px.
le background-color n’est pas obligatoire, j’ai juste mis une opacité sur l’image ce qui fait ressortir la couleur de fond du module


.dg-bloc-hover_effect .et_pb_blurb_content {
height: 100%;
max-width: none;
}

La partie image

Je prépare le conteneur généré par divi , afin que celui-ci prenne toute la hauteur du module que l’on a précédemment fixé à 250p.
max-width: none;
// Le style css de Divi par défaut met un max-width, il faut le surclasser.


.dg-bloc-hover_effect .et_pb_main_blurb_image  {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
}

Divi génère également un conteneur pour l’image, il faut également l’adapter à la taille de notre module.
overflow: hidden;
// Afin d’avoir un belle éffet on cache tout ce qui dépasse du cadre du module


.dg-bloc-hover_effect .et_pb_main_blurb_image img {
max-width: none;
opacity: 0.9;
transform: translate3d(-40px, 0px, 0px);
transition: transform 0.35s ease 0s;
width: calc(100% + 50px);
min-height: 100%;
position: relative;
}

Ensuite il faut adapter la taille de l’image (attention c’est une balise HTML <img> et non une image en arrière plan)
transform: translate3d(-40px, 0px, 0px);
// Je décale l’image avec un effet de déplacement de -40px sur l’axe des X.
transition:  transform 0.35s ease 0s;
// J’initialise les effets CSS que l’on utilisera au survol.
Ici je dit au navigateur que je souhaite une transition sur le paramètre transform d’une durée de 0.35s avec une courbe de type « ease » et enfin je ne souhaite pas décaler le départ 0s.
Si vous souhaitez d’autres courbes d’effets CSS

width: calc(100% + 50px);
Par défaut l’image fait 100% de la largeur mais pour notre effet elle doit être plus large que notre conteneur.

La partie texte


.dg-bloc-hover_effect .et_pb_blurb_container {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 20px;
}

Je positionne le conteur que génère Divi pour le texte par dessus l’image à gauche et en bas de notre module


.dg-bloc-hover_effect h4 {
transform: translate3d(0px, 20px, 0px);
transition: transform 0.35s ease 0s;
font-weight: bold;
}

Au niveau du titre, Divi génère une balise H4.
Comme pour l’image on initialise l’effet et on force avec le translate3D le titre à être 20px plus bas


.dg-bloc-hover_effect p {
opacity: 0;
transform: translate3d(0px, 20px, 0px);
transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
width: 100%;
}

 

Même combat pour la balise <p> à la différence qu’on lui applique une opacité à 0.

Au survol tout ce beau monde reprendra sa place initiale et leur opacité à 1.

Les effets au survol


.dg-bloc-hover_effect:hover {
cursor: pointer;
}
.dg-bloc-hover_effect:hover .et_pb_main_blurb_image img {
transform: translate3d(0px, 0px, 0px);
}
.dg-bloc-hover_effect:hover h4 {
transform: translate3d(0px, -20px, 0px);
}
.dg-bloc-hover_effect:hover p {
transform: translate3d(0px, -20px, 0px);
opacity: 1;
transition-delay: 0.05s;
transition-duration: 0.35s;
}

Je force l’affichage du curseur avec la main pour montrer qu’il y a un lien à l’internaute.
Pour un effet plus sympa j’ai ajouté un Delay sur la balise <p> qui décale légèrement avec la balise H4

Voir la démo

Télécharger la source

 

Importer les sources :