Comment ajouter une superposition transparente à une image en survol à l'aide de CSS ?

Comment ajouter une superposition transparente à une image au survol à l'aide de CSS

L'ajout d'une superposition noire transparente à une image au survol à l'aide de CSS est une technique utilisée pour attirer l'attention à des zones spécifiques d'une image ou pour créer un effet interactif subtil. Bien qu'apparemment simple, cela peut présenter des défis si vous n'êtes pas familier avec le fonctionnement interne du modèle de boîte CSS.

Dans cette discussion, nous examinerons les raisons pour lesquelles l'extrait de code fourni ne parvient pas à atteindre l'objectif. résultat souhaité, puis explorez une solution viable.

Comprendre le problème

Le code d'origine tente d'obtenir l'effet de superposition en utilisant une combinaison de divs et de : survolez la pseudo-classe. Cependant, cette approche présente quelques problèmes :

1. Élément img inclus : les pseudo-éléments CSS ne peuvent pas être ajoutés directement aux éléments img inclus dans d'autres éléments comme div.
2. Position et affichage : L'élément de superposition utilise par erreur display: none; pour cacher, au lieu de l'opacité : 0 ; ou visibilité : caché ;.

Implémentation de la superposition avec des pseudo-éléments

Pour appliquer l'effet de superposition, il est plus pratique d'utiliser des pseudo-éléments CSS au lieu de divs séparés. Les pseudo-éléments permettent une intégration transparente dans l'élément auquel ils sont attachés, ce qui les rend idéaux pour ce scénario.

1. Envelopper l'img : comme indiqué précédemment, les pseudo-éléments peuvent ne doit pas être placé directement sur les éléments img eux-mêmes. Par conséquent, il est nécessaire d'envelopper l'img dans un élément parent.
2. Positionnement de l'élément parent : assurez-vous que l'élément parent (image dans ce cas) a une position définie (généralement relative ou absolue) pour servir de point de référence pour la superposition.
3. Créer le pseudo-élément :after : Ajouter un pseudo-élément :after au parent élément (image) et définissez son contenu, sa position et sa couleur d'arrière-plan comme vous le souhaitez pour l'effet de superposition.
4. Transition : Pour faire apparaître la superposition au survol, incluez une propriété de transition sur : après le pseudo-élément pour contrôler son évolution dans le temps.
5. Déclenchez la superposition : utilisez la pseudo-classe :hover pour déclencher le l'apparence de la superposition en modifiant l'opacité ou la visibilité du pseudo-élément :after.

Superpositions avec texte

Pour ajouter du texte à la superposition au survol, vous pouvez utiliser la propriété content de le pseudo-élément et fournir le contenu textuel souhaité. En tirant parti de attr(data-content), vous pouvez rendre le texte spécifique à chaque image en ajoutant un attribut data-content à l'élément parent.

Conclusion

Appliquer un effet de superposition transparent à une image au survol en utilisant uniquement CSS nécessite une compréhension du modèle de boîte CSS et des puissantes capacités des pseudo-éléments. En mettant en œuvre les techniques expliquées dans cet article, vous pouvez créer des superpositions interactives et visuellement attrayantes qui améliorent l'engagement des utilisateurs avec vos images.

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!