Comment créer : Effet de couche

Apprenez à créer un effet de couche de superposition en utilisant CSS (un effet de superposition).

Comment créer un effet de couche de superposition

Étape 1 - Ajoutez du HTML :

Utilisez n'importe quel élément et placez-le à tout endroit du document :

<div id="overlay"></div>

Étape 2 - Ajoutez du CSS :

Définissez les styles de l'élément de couche de superposition :

#overlay {
  position: fixed; /* Situé au sommet du contenu de la page */
  display: none; /* Masqué par défaut */
  width: 100%; /* Largeur complète (couvre toute la page) */
  height: 100%; /* Hauteur complète (couvre toute la page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Arrière-plan noir transparent */
  z-index: 2; /* Si vous utilisez une autre ordre pour d'autres éléments, spécifiez l'ordre de superposition */
  cursor: pointer; /* Ajoutez le curseur de souris au survol */
}

Étape 3 - Ajoutez du JavaScript :

Ouvrez et fermez l'effet de couche de superposition en utilisant JavaScript :

function on() {
  document.getElementById("overlay").style.display = "block";
}
function off() {
  document.getElementById("overlay").style.display = "none";
}

Essayez-le vous-même

Effet de couche de superposition avec texte

Ajoutez tout le contenu que vous souhaitez dans la couche de superposition et placez-le à l'endroit souhaité. Dans cet exemple, nous avons ajouté du texte au centre de la page :

Exemple

<style>
#text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
</style>
<div id="overlay">
  <div id="text">Text de Superposition</div>
</div>

Essayez-le vous-même