Bonjour,

Voici un tutoriel très simple pour apprendre à faire cela Recouvrir Uniquement en HTML et CSS.

En effet, qui n’en a jamais voulu recouvrir rapidement un texte sur une image? Pouvez-vous le changer avec la souris ou même afficher une autre image?

Le code fourni dans cet article peut s’appliquer à n’importe quel site. Intégrez simplement le code HTML sur une page et le code CSS dans votre fichier de style.

Il existe plusieurs façons de le faire sur Internet, mais je voulais synthétiser tout ce que je trouvais pour extraire une solution minimale et surtout propre.

Présentation de la superposition sur une image

Une superposition est simplement la superposition d’une couche sur une autre, par exemple deux divs. En HTML, cependant, cela signifie que le niveau supérieur doit être supprimé du flux, sinon il ne peut pas chevaucher l’autre.

Noter : On peut bien sûr écrire du texte dans un div avec une image de fond et même changer l’image de fond lors du survol, mais le but de cet article est de superposer chaque élément sur un élément différent, ici un div avec un élément d’image (jour img).

Superposez facilement du texte sur une image

Superposition avec changement de texte lors du survol

Superposition avec le texte et l’image change lors du survol

Code HTML: contenu original et « superposition »

Structure du contenu

Le conteneur de classe Image de superposition encapsule toutes les structures nécessaires:

  • Image originale,
  • Bloquer les textes originaux,
  • Le bloc image / texte est affiché avec la souris dessus (« Hover »).

Sur une page écrite sans constructeur (Page HTML ou simple thème WordPress), comme cet article, il est important de le définir, d’incorporer un contenu original et Recouvrir proprement à l’intérieur de la page.

Avec un constructeuril peut être remplacé par un bloc conteneur (par exemple avec DIvi cela peut être le module « code » auquel on ajoute simplement la classe Image de superposition).

Le code

/* Superposition simple */
<div class="overlay-image"><a href="https://pavenum.com/blog/overlay-avec-hover-sur-une-image-en-html-css/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="https://pavenum.com/blog/overlay-avec-hover-sur-une-image-en-html-css/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="https://pavenum.com/blog/overlay-avec-hover-sur-une-image-en-html-css/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: Apparence de la superposition sur le « survol »

Le code suivant doit être inclus dans la définition de vos styles:

  • déposer style.css Récupéré par votre fichier HTML pendant que vous travaillez HTML direct,
  • déposer style.css de toi Thème des enfants si vous travaillez avec WordPress,
  • ou dans le Options d’une page Divi lorsque le mécanisme n’est utilisé que dans un endroit précis.

Affichage de la superposition de texte d’origine

La classe Image de superposition vous permet de configurer ces conteneur global dans le cas d’une page sans constructeur. Par exemple, dans cet article, j’ai la « largeur: 100%; » avec « largeur: 80% marge: auto; ».

Note importante : Le conteneur Superposition d’image ALLER À relativement « positionné » afin de pouvoir positionner les éléments qui y sont contenus en séquence.

L’image et le texte d’origine sont définis par .overlay-image .image et .overlay-image .text ::

  • la photo occupe tout l’espace disponible,
  • «Positionnement» centre le texte sur l’image. Tout à fait sur le bloc conteneur et un Traduction (un classique).

Affichage de la nouvelle superposition au survol de la souris

La superposition est matérialisée par .overlay-image .hover, « positionné » dans Tout à fait pour couvrir toute la surface du conteneur, y compris l’image et le texte d’origine (100% largeur et hauteur).

Si la souris passe, c’est opacité passe de 0 à 1 avec un Réconciliation doux pour le faire apparaître au-dessus de ça div Original.

Pour une superposition du transfert de seulement du texte (donc pas d’image) vous devez d’abord Masquer le texte d’origine parce que 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 la seule requise pour une simple superposition de texte (sans changement de 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 vous deux flotter ::

/********* 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;
}

Le dernier est juste pour changer le texte lors du 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 voir, la superposition n’est techniquement pas très difficile … c’est donc dommage que le mécanisme ne soit pas intégré à tous les thèmes WordPress du marché!



Source link

Recent Posts