Comment créer un effet de superposition sombre avec du texte et des icônes sur le survol de l'image à l'aide de CSS ?-tutoriel CSS-php.cn

Comment créer un effet de superposition sombre avec du texte et des icônes sur le survol de l'image à l'aide de CSS ?

Patricia Arquette

Libérer： 2024-10-29 18:39:14

original

708 Les gens l'ont consulté

How to Create a Dark Overlay Effect with Text and Icons on Image Hover Using CSS?

Création d'un effet de superposition sur des images avec CSS

Dans cet article, nous explorerons comment obtenir l'effet d'une superposition sombre avec du texte et une icône lorsque vous survolez une image à l'aide de CSS.

Problème :

Vous souhaitez créer une galerie d'images interactive où le survol d'une image affiche une superposition sombre avec des contenu, comme illustré dans l’image fournie. Le défi consiste à obtenir cet effet pour des images de différentes hauteurs, avec une largeur constante.

Solution :

Pour y parvenir, nous utilisons une combinaison de HTML et CSS comme suit :

Marquage HTML :

<img src="image-url" />
<div class="after">This is some content</div>

Copier après la connexion

Règles de style CSS :

<code class="css">.image-container {
    position: relative;
    width: <fixed width>;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}</p>
<p>Dans ce code, .image-container sert de wrapper pour l'image et le div de superposition. Le positionnement de .after garantit que la superposition couvre la totalité de l'image, tandis que la propriété d'affichage conditionnel rend la superposition visible uniquement au survol. Vous pouvez personnaliser l'apparence de la superposition en modifiant la couleur d'arrière-plan et le contenu au sein du .after div.</p>
<p><strong>Personnalisation :</strong></p>
<p>La solution fournie sert de modèle de base, et vous pouvez améliorer son esthétique en ajoutant des règles CSS supplémentaires. Par exemple, vous pouvez aligner le contenu verticalement dans la superposition, modifier le style de l'icône ou inclure des propriétés de transition pour des animations de survol plus fluides.</p>
<p>Voici un exemple modifié avec un style supplémentaire :</p>
<pre class="brush:php;toolbar:false"><code class="css">.image-container .after .content {
    position: absolute;
    bottom: 5px;
    text-align: center;
    width: 100%;
    padding: 5px;
}
.image-container .after .zoom {
    color: #DDD;
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -19px;
    height: 50px;
    width: 45px;
    cursor: pointer;
}
.image-container .after .zoom:hover {
    color: #FFF;
}</code>

Copier après la connexion

Dans ce code mis à jour, le contenu superposé est positionné en bas avec un alignement centré. De plus, une icône de zoom a été ajoutée, qui change de couleur au survol. Ces personnalisations démontrent la flexibilité de la solution fournie et vous permettent de créer des superpositions d'images sur mesure.

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!