Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Bonjour,

Voici aussi un tutoriel très simple Superpositions d’images de conception Uniquement en HTML et CSS.

En effet, qui n’a jamais voulu en positionner rapidement un Texte sur une image? Puis changez-le Survol de la souris ou même montrer une autre image?

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

Vous pouvez trouver plusieurs façons de le faire sur Internet, mais je voulais résumer tout ce que j’ai trouvé pour extraire une solution minimale et surtout propre.

Qu’est-ce qu’une superposition de sous-titres?

Pour moi, une superposition est juste mettre une couche sur une autre. En HTML, cela signifie qu’il fait de la rivièrecar il doit être positionné sur un autre élément, ce qui n’est pas possible avec le comportement par défaut.

Noter: Je ne parle pas de texte sur une image d’arrière-plan, qui est standard en HTML, mais de texte sur un élément d’image (l’infâme) img Étiqueter).

Superposition de texte simple sans survol

Superposition avec l’arrière-plan et les modifications 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 Image de superposition Le conteneur de classe encapsule tout le nécessaire structure::

  • Image originale,
  • Bloc de texte de superposition d’origine,
  • Le bloc de superposition d’image / texte s’affiche lors du déplacement de la souris.

Écrit d’un côté sans constructeur de page (Page HTML ou simple thème WordPress), par exemple comme dans cet article, il est important de Définissez-le pour incorporer correctement le contenu original et la superposition dans la page.

Avec un constructeuril peut être remplacé par un conteneur existant Block (par exemple il pourrait s’agir du module Divi « Code » auquel on vient d’ajouter ça Image de superposition Classer).

Le code ci-dessous comprend également l’encapsulation des balises de lien pour rendre les images cliquables. Cependant, vous pouvez les supprimer s’ils ne sont pas nécessaires.

Le code HTML

/* Simple overlay */
<div class="overlay-image"><a href="https://pavenum.com/en/blog/images-and-text-overlays-in-html-css/LINK_URL">
  <img class="image" src="IMAGE" alt="Alt text" />
  <div class="text">Image + text
    NO HOVER</div>
</a></div>
/* Color background and text overlay on hover */
<div class="overlay-image"><a href="https://pavenum.com/en/blog/images-and-text-overlays-in-html-css/LINK_URL">
  <img class="image" src="IMAGE" alt="Alt text" />
  <div class="normal">
    <div class="text">Image + text
      ORIGINAL</div>
  </div>
  <div class="hover">
    <div class="text">Background + text
      HOVER</div>
  </div>
</a></div>
/* Image and text overlay on hover */
<div class="overlay-image"><a href="https://pavenum.com/en/blog/images-and-text-overlays-in-html-css/LINK_URL">
  <img class="image" src="ORIGINAL_IMAGE" alt="Alt text" />
  <div class="normal">
    <div class="text">Image + text
      ORIGINAL</div>
  </div>
  <div class="hover">
    <img class="image" src="OVERLAY_IMAGE" alt="Alt text hover" />
    <div class="text">Image + text
      HOVER</div>
  </div>
</a></div>

Code CSS: superposition de texte et changement de texte / image lors du survol

Le code suivant doit être inclus avec le vôtre Définition de style::

  • style.css Fichier inclus dans votre fichier HTML si vous travaillez directement en HTML,
  • style.css Fichier de votre thème enfant si vous travaillez avec WordPress,
  • ou vos options de page Divi si le mécanisme n’est utilisé que dans un endroit précis.

Comment afficher la superposition de texte d’origine ou de texte brut?

le Image de superposition Avec class, vous pouvez définir le conteneur global si vous n’utilisez pas de générateur de page. Dans cet article, j’ai remplacé le « Largeur: 100% ». par « Largeur: 80% Bord: Auto; » Ajoutez des marges.

Note importante: le Superposition d’image Le conteneur DOIT être « positionné » lui-même (ici relativement) afin de positionner ses propres éléments.

Superposition d’image et de texte d’origine sont définis par .overlay-image .image et .overlay-image .text Prescripteur:

  • l’image remplit tout l’espace disponible,
  • Le texte est centré sur l’image en utilisant un « positionnement » absolu sur le bloc conteneur et une traduction XY (un classique CSS).

Comment la nouvelle superposition s’affiche-t-elle au survol?

le Superposition de survol se matérialise à travers .overlay-image .hoveret « positionné de manière absolue » pour occuper toute la surface du conteneur, y compris l’image et le texte d’origine (100% largeur et hauteur).

Si la souris plane, c’est opacité passe de 0 à 1 avec une transition douce pour qu’il apparaisse sur le div d’origine.

À Superposer un seul bloc de texte (pas d’image) tu dois Tout d’abord, masquez le texte d’origine car la nouvelle image n’est pas là pour ça.

Le code CSS

J’ai essayé de factoriser le code pour le rendre simple, lisible, compact et facile à utiliser. Pour ce faire, je l’ai décomposé en trois parties que vous pouvez choisir en fonction de vos besoins.

La première partie est commune les trois types de superpositions précédentes et c’est le seul nécessaire pour une simple superposition de texte:

/********* Simple or original overlay *******/

/* Main container */
.overlay-image {
  position: relative;
  width: 100%;
}

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

/* Original text overlay */
.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 pièce est requise par les deux superpositions lors du survol::

/********* Overlay on hover *******/

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

/* New overlay appearance on hover */
.overlay-image:hover .hover {
  opacity: 1;
}

Cette dernière partie n’est nécessaire que pour Fond + superposition de texte lors du survol::

/********* Background and text only overlay on hover *******/

.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, les superpositions ne sont techniquement pas très difficiles … c’est dommage que le mécanisme ne fasse pas partie de tous les thèmes WordPress du marché!



Source link

Recent Posts