Wie erstelle ich mithilfe von CSS einen dunklen Overlay-Effekt mit Text und Symbolen beim Schweben von Bildern?

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

<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>In diesem Code dient .image-container als Wrapper für das Bild und das Overlay-Div. Durch die Positionierung von .after wird sichergestellt, dass das Overlay das gesamte Bild abdeckt, während die bedingte Anzeigeeigenschaft das Overlay nur beim Schweben sichtbar macht. Sie können das Erscheinungsbild des Overlays anpassen, indem Sie die Hintergrundfarbe und den Inhalt innerhalb des .after-Divs ändern.</p>
<p><strong>Anpassung:</strong></p>
<p>Die bereitgestellte Lösung dient als grundlegende Vorlage. und Sie können die Ästhetik verbessern, indem Sie zusätzliche CSS-Regeln hinzufügen. Sie können beispielsweise den Inhalt innerhalb des Overlays vertikal ausrichten, den Symbolstil ändern oder Übergangseigenschaften für flüssigere Hover-Animationen hinzufügen.</p>
<p>Hier ist ein modifiziertes Beispiel mit zusätzlichem Stil:</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>