A lire également...
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
PAS DE HOVER
Superposition avec changement du texte au survol
ORIGINAL
HOVER
Superposition avec changement texte et image au survol
ORIGINAL
HOVER
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 🙁
Bonjour,
Je débute en Divi aussi difficile de savoir où caser tout ça. Pourriez-vous svp me préciser quoi mettre où?
Merci
Bonjour Agnès,
Désolé si ce n’est pas clair, mais l’article explique brièvement les différentes façons d’utiliser les codes fournis.
En gros, sur une page écrite sans le constructeur de page (Divi builder), donc un article de blog ou une page statique avec l’éditeur natif WordPress, il faut insérer le code HTML via l’onglet « Texte » de l’éditeur à l’endroit voulu dans le contenu de la page. Et sur une page construite avec le builder, on peut insérer le code HTML soit dans un module « Code », le plus logique, soit dans tout autre module qui propose l’éditeur HTML, et dans ce cas, toujours dans l’onglet « Texte ».
Comme je l’explique, l’insertion du code dans l’éditeur natif n’est pas très pratique, donc commence plutôt avec un module Divi Code, tu te prendras moins la tête.
J’ai fourni deux exemples de code dans le bloc HTML : le premier avec un overlay texte uniquement, le second avec l’image qui change en plus.
Tu peux coller le code CSS dans les options générales de Divi, tout en bas : « Custom CSS » ou « Personnaliser Divi », ou bien le coller dans le fichier style.css de ton thème enfant si tu en utilises un (ou le fichier équivalent contenant la définition des styles), et dans ce cas le code sera appliqué à tout le site, donc utilisable sur toutes les pages.
Tu peux aussi le coller dans les options du builder de la page où tu veux insérer l’overlay, ainsi il ne sera chargé que pour cette page, ce qui est plus optimal.
Bon courage !
Bonjour,
Tout d’abord, grand merci pour ce tuto qui peut apporter pour des personnes qui débutent (dont c’est mon cas) un appui précieux.
J’ai tenté sans succès d’utiliser la méthode avec le module bascule Divi (partie feuille de style et ajout module code).
Le besoin : au survol de l’élément bascule , affichage d’une image (dans l’esprit de la représentation de la page : « https://4rsmokehouse.com/catering/ »).
Pourriez-vous m’aiguiller par quelques conseils ou lectures utiles.
En vous remerciant par avance pour votre soutien précieux.
Excellent WE.
Bonjour Franck,
Effectivement le problème est un peu complexe car il faut modifier le code généré pour le module (a priori il faut ajouter un div overlay avec image et titre de la bascule sur le .et_pb_toggle, et jouer avec l’opacité au survol pour le fondu).
Sinon, si le fondu n’est pas important, on peut aussi simplement afficher en CSS une image de fond pour chaque titre de bascule au survol de la souris, et changer la couleur du titre :
.et_pb_accordion .et_pb_toggle_close:hover {
background-image: url(‘CHEMIN_IMAGE’);
}
.et_pb_accordion .et_pb_toggle_close:hover .et_pb_toggle_title {
color: #fff;
}
C’est moins propre, mais malheureusement la propriété « transition » ne fonctionne pas pour l’image de fond.
Bonjour, merci pour ce tuto.
J'aimerais avoir plus de précision sur comment mettre une couleur transparente sur une image au survol de la souris sans changer quoi que ça soit (ni image ni texte) comme sur le site de France 24 où on a une bleue turquoise transparente quand on met la souris sur un article.
Merci d'avance.
Salut,
Pour ce type d'overlay c'est un peu plus simple, il faut juste un div contenant l'image, auquel on ajoute un pseudo-élément after :
HTML :
<div class="image-container"><img …….></div>
CSS :
.image-container {
position: relative;
}
.image-container::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,255,0.2);
opacity: 0;
transition: opacity 0.3s;
}
.image-container:hover::after {
opacity: 1;
}
Merci pour ce tuto qui m'a été très utile.
Je vous en prie !
Bonjour,
Je suis tombée sur votre poste et j'avoue être impressionnée par le résultat donné puisque c'est tout à fait ce dont j'ai besoin pour mon blog. Je souhaiterai ajouter un texte à une photo de profile sur canalblog.com, selon vous comment je peux faire pour utiliser le code Html et celui en CSS3 afin d'incruster le texte sur l'image apparaissant au survol de la souris ? (Je peux modifier directement le code Html de la page source dans l'édition du message concerné, c'est la seul piste à ma disposition seulement étant plus que débutante dans le domaine je ne parviens pas à mes fins)
Merci pour votre réponse
Bonjour Laura,
Je ne connais pas le fonctionnement de canalblog.com.
Vous n'avez pas une option pour insérer du CSS ?
Sinon, il est aussi possible de l'intégrer directement au HTML :
<style type="text/css">
/* Le CSS ici */
</style>
A voir si canalblog l'accepte ou le filtre…
Bonjour et tout d'abord un grand merci pour ce tuto extrêmement bien expliqué !
J'ai pu arriver facilement au résultat escompté. J'ai une petite question concernant l'opacité du texte, savez-vous s'il est possible de gérer celle du texte indépendamment de celle du bloc conteneur ? (afin que le texte ne soit pas légèrement transparent)
Salut Nicolas,
Pouvez-vous me décrire exactement ce que vous voulez faire ? De quel type de hover parlez-vous ?
La solution que je cherchais depuis des lustres ! Merci, c'est parfaitement adaptable et personnalisable. Bravo.
De rien et merci!
Désormais divi intégre la fonction de hover dans ses paramètres. Mais je cherche à ajouter du texte en surbrillance sur une photo produit woocommerce. Pourriez-vous m'aider ? J'ai touvé pour mettre un texte en overlay sur toutes les images, mais je voudrais mettre un texte différent par image.
Bonjour Karen,
Je ne sais pas quelle technique vous avez utilisé pour toutes les images, mais a priori ça peut être fait en CSS si le texte est statique (par exemple un ::after avec un content: "le texte").
Si c'est le cas, pour adapter le texte à chaque image, vous pouvez utiliser le même procédé en ciblant spécifiquement chaque image avec un sélecteur CSS plus précis (à trouver en examinant les classes et id des images).
Si le texte est dynamique (par exemple il correspond au titre de l'image, à la légende ou à la description), alors c'est plus complexe, il faut modifier woocommerce. Pour cela, cherchez du côté des hooks woocommerce pour voir si on peut filtrer le code source des images pour lui ajouter un overlay.
bonjour et merci pour ce tuto. Il m'a permis de comprendre l'attribut "hover". Par contre, peut etre pourrez vous m'aider…. Ca fonctionne tres bien au survol de la souris mais plus rien sur ecran tactile. Y a t'il une alternative ?
Bonjour Sandrine et merci pour ton message !
Malheureusement, le "hover" n'est pas du tout adapté aux écrans tactiles…
On peut en CSS le transformer en "on-click", donc en bouton normal, mais je trouve que ce n'est pas très ergonomique.
Perso, pour faire vraiment responsive tout en restant 100% accessible et ergonomique, je fais désormais sans hover 😉
C'est hyper intéressant merci !
Je bidouille "divi" avec juste mes méninges pour essayer de réaliser des petites réalisations supplémentaires sur DIVI.
J'ai juste une petite question. Cette logique serait adaptable pour l'affichage de présentation de la page blog (affichage du titre de l'article au survol de l'image , j'ai déjà réussi à supprimer l'aperçu) ?
Merci à toi d'expliquer ces petites choses hyper utiles (et comme toi, quand je vois ce que DIVI propose, je suis hyper étonné de pas voir ce genre de truc en natif…)
Salut Thomas et merci pour ton message !
Oui bien sûr on peut adapter le code pour les vignettes du blog, et c'est encore plus simple, il n'y a que du CSS, mais ça dépend beaucoup de l'affichage désiré.
Par exemple, pour afficher le titre au survol sur l'image (avec déplacement du titre sur la photo) :
.blog h2.entry-title {
position: absolute;
top: 0;
left: 0;
padding: 20px; /* pour pas coller aux bords */
opacity: 0;
}
.blog article:hover h2.entry-title {
opacity: 1;
}
Quelque chose comme ça 😉
Bonjour et merci pour ce super tuto.
J'ai un gros problème (tout débutant que je suis), j'ai réussi a faire la version hoover image + texte mais je souhaite ajouter un bouton transparent avec bords en blanc, aligné center center (avec le texte en dessous du bouton). Je n'arrive pas du tout à intégrer de bouton 🙁
Peux-tu m'aider ? C'est la loose lol :(((
un grand merci à toi !
Stef
Salut Stef,
Il suffit d'ajouter le bouton juste avant le texte dans le div affiché au survol :
<a class="overlay-button" href="URL_LIEN">Bouton</a><br><br>
Avec le CSS suivant :
.overlay-button { display: inline-block; color: #fff; border: solid 1px #fff; padding: 6px 12px }