Comment créer une superposition noire invisible CSS sur le survol d'une image à l'aide de pseudo-éléments ?

Superposition noire invisible CSS au survol

Réaliser une superposition noire transparente sur une image au survol est en effet possible en utilisant du CSS pur. Cependant, l'approche mentionnée dans votre exemple de code initial, impliquant l'utilisation d'un div superposé, peut ne pas convenir en raison de problèmes de positionnement et de visibilité.

Une solution plus efficace consiste à utiliser un pseudo-élément. Voici comment ça marche :

Code CSS

.image {
  position: relative;
  /* Set dimensions as needed (or omit for responsiveness) */
  width: 400px;
  height: 400px;
}

.image img {
  width: 100%;
  vertical-align: top;
}

.image:after {
  content: '\A'; /* Pseudo content to trigger browser rendering */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6); /* Black with 60% opacity */
  opacity: 0; /* Initially invisible */
  transition: all 1s; /* Animation transition */
}

.image:hover:after {
  opacity: 1; /* Shows overlay on hover */
}

Explication

1. Nous utilisons un div avec classe "image" pour envelopper l'image. Il est positionné relativement pour permettre au pseudo-élément d'être positionné dans ses limites.
2. Nous stylisons l'élément enfant img pour qu'il ait une largeur de 100 % et un alignement vertical vers le haut.
3. Le pseudo -element (.image:after) est positionné de manière absolue dans l'image div. On lui attribue initialement une opacité de 0, ce qui le rend invisible.
4. Au survol (.image:hover:after), l'opacité du pseudo-élément passe à 1, le rendant visible et créant efficacement la superposition noire.

Fonctionnalités supplémentaires

Texte Ajout :
Pour ajouter du texte à la superposition au survol, vous pouvez utiliser la propriété content dans le style du pseudo-élément. Par exemple :

.image:after {
  content: 'Hover Text...'; /* Custom overlay text */
}

Personnalisation :
Vous pouvez ajuster l'opacité et la vitesse de transition pour modifier l'effet de visibilité. De plus, vous pouvez ajouter des images d'arrière-plan ou des dégradés pour créer des superpositions plus complexes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!