Bonjour,

Voici un tutoriel très simple pour apprendre le fonctionnement des overlay en HTML et CSS uniquement.

En effet, qui n’a jamais eu envie de superposer rapidement un texte sur une image ? Puis de le modifier au passage de la souris où même d’afficher une image alternative ?

Le code fourni dans cet article peut s’appliquer à n’importe quel site. Il suffit d’intégrer le code HTML sur une page et le code CSS dans votre fichier de style.

On trouve différentes façons de la faire sur le net, mais j’ai voulu synthétiser tout ce que j’ai trouvé pour en extraire une solution minimale, et surtout propre.

Présentation de l’overlay sur une image

Un overlay, c’est simplement la superposition d’une couche sur une autre, par exemple deux divs. Mais en HTML, cela implique que la couche supérieure doit sortir du flux, car sinon elle ne peut pas recouvrir l’autre.

Remarque : On peut bien sûr écrire un texte dans un div avec une image de fond, et même changer l’image de fond au survol, mais le but de cet article est de superposer un élément quelconque sur un autre élément quelconque, ici un div avec un élément image (balise img).

Superposition simple de texte sur une image

Superposition avec changement du texte au survol

Superposition avec changement texte et image au survol

Code HTML : contenus originaux et « overlay »

La structure des contenus

Le conteneur de classe .overlay-image encapsule toute la structure nécessaire :

• image originale,
• bloc texte original,
• bloc image/texte affiché au passage de la souris (« hover »).

Sur une page écrite sans constructeur (page HTML ou thème WordPress simple), comme par exemple cet article, il est indispensable de le définir afin d’intégrer contenu original et overlay proprement au sein de la page.

Avec un constructeur, il peut être remplacé par un bloc conteneur (par exemple avec DIvi cela peut être le module « code », auquel on ajoute simplement la classe overlay-image).

Le code

/* Superposition simple */
<div class="overlay-image"><a href="URL_LIEN">
 <img class="image" src="IMAGE" alt="Alt text" />
 <div class="text">Image + texte
  PAS DE HOVER</div>
</a></div>

/* Superposition et changement background et texte au survol */
<div class="overlay-image"><a href="URL_LIEN">
 <img class="image" src="IMAGE" alt="Alt text" />
 <div class="normal">
  <div class="text">Image + texte
   NORMAL</div>
 </div>
 <div class="hover">
  <div class="text">Background + texte
   HOVER</div>
 </div>
</a></div>

/* Superposition et changement image et texte au survol */
<div class="overlay-image"><a href="URL_LIEN">
 <img class="image" src="IMAGE_ORIGINALE" alt="Alt text" />
 <div class="normal">
  <div class="text">Image + texte
   NORMAL</div>
 </div>
 <div class="hover">
  <img class="image" src="IMAGE_OVERLAY" alt="Alt text hover" />
  <div class="text">Image + texte
   HOVER</div>
 </div>
</a></div>

Code CSS : apparition de l’overlay sur le « hover »

Le code ci-dessous est à intégrer dans la définition de vos styles :

• fichier style.css inclus par votre fichier HTML si vous travaillez en HTML directement,
• fichier style.css de votre thème enfant si vous travaillez avec WordPress,
• ou encore dans les options d’une page Divi si le mécanisme n’est utilisé qu’à un endroit précis.

Affichage de l’overlay texte original

La classe .overlay-image permet de paramétrer le conteneur global dans le cas d’une page sans constructeur. Par exemple dans cet article j’ai remplacé le « width: 100%; » par « width: 80% margin: auto; ».

Remarque importante : Le conteneur .image-overlay DOIT être « positioné » en relatif afin de pouvoir positionner à leur tour les éléments qu’il contient.

Image et texte originaux sont définis par .overlay-image .image et .overlay-image .text :

• l’image prend toute la place disponible,
• le texte est centré sur l’image en utilisant un « positionnement » absolu sur le block conteneur et une translation (un classique).

Affichage du nouvel overlay au survol de la souris

L’overlay est matérialisé par .overlay-image .hover, « positionné » en absolu pour occuper toute la surface du conteneur comprenant image et texte originaux (largeur et hauteur à 100%).

Lors du passage de la souris, son opacité passe de 0 à 1 avec une transition douce afin de le faire apparaître par-dessus le div original.

Pour une superposition au survol de texte uniquement (donc sans image), il faut au préalable masquer le texte original car la nouvelle image n’est pas là pour le faire.

Le code

J’ai essayé de factoriser le code pour le rendre simple, lisible, compact et facilement réutilisable. Pour ce faire, je l’ai divisé en trois parties que vous pouvez choisir en fonction de vos besoins.

La première partie est commune aux trois types de superpositions et c’est la seule nécessaire pour une simple superposition de texte (sans changement au survol) :

/********* Superposition simple de texte sur une image *******/

/* Conteneur principal */
.overlay-image {
 position: relative;
 width: 100%;
}

/* Image originale */
.overlay-image .image {
 display: block;
 width: 100%;
 height: auto;
}

/* Texte original */
.overlay-image .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}

Cette partie est nécessaire pour les deux hover :

/********* Hover image et texte *******/

/* Overlay */
.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
}

/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
 opacity: 1;
}

La dernière est uniquement destinée au changement de texte au survol :

/********* Hover background et texte uniquement *******/

.overlay-image .normal {
 transition: .5s ease;
}
.overlay-image:hover .normal {
 opacity: 0;
}
.overlay-image .hover {
 background-color: rgba(0,0,0,0.5);
}

Conclusion

Comme vous pouvez le constater, la superposition n’est pas très difficile techniquement… C’est donc dommage que le mécansme ne soit pas intégré dans tous les thèmes WordPress du marché !

Attention cependant à l’insertion du code HTML dans votre éditeur WordPress ou votre constructeur.

Personnellement, j’ai eu une mauvaise surprise en rédigeant cet article lors du passage de l’onglet « Texte » à l’onglet « Visuel » dans l’éditeur, car WordPress reformate à sa sauce le code HTML. Et il ne le fait pas bien : déplacement des balises </a>, ajout de </p>, suppression de </div>… Bref, il pête tout ! La seule solution que j’ai trouvée (en attendant de patcher le méchant CMS !) consiste à reformater correctement le HTML via l’onglet « Texte » avant de sauvegarder pour la dernière fois 🙁