CSS realisiert den Maskeneffekt, wenn die Maus über das Bild bewegt wird

1. Setzen Sie den HTML-Code der Maskenebene und das Bild in ein Div

Ich habe es in .img_div eingefügt.

<div Klasse="img_div">
    <img src="./images/paella-gericht.jpg">
 
        <a href="#">
            <div Klasse="Maske">
               <h3>Ein Bild von Essen</h3>
                </div>
        </a>
</div>

2. Fügen Sie Bildern und Maskenebenen Stile hinzu

Bild: relativ

Maskenebene: absolut

Sorgen Sie für eine Überlappung der beiden Stile.

Wenn sich die Maus nicht auf dem Bild befindet, wird die Maskenebene nicht angezeigt: .mask { opacity: 0; } .

.img_div {
    Rand: 20px 400px 0 400px;
    Position: relativ;
    Breite: 531px;
    Höhe: 354px;
}
.Maske {
    Position: absolut;
    oben: 0;
    links: 0;
    Breite: 531px;
    Höhe: 354px;
    Hintergrund: rgba(101, 101, 101, 0,6);
    Farbe: #ffffff;
    Deckkraft: 0;
}
.mask h3 {
    Textausrichtung: zentriert;
}

3. Hover verwenden

Ändern Sie die Transparenz, damit die Maskenebene durchscheint.

.img_div a:hover .mask {
    Deckkraft: 1;           
}

Effektbild:

Zusammenfassen

Oben ist das CSS, das ich Ihnen vorgestellt habe, um den Maskenebeneneffekt zu realisieren, wenn die Maus über das Bild bewegt wird. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!