Wie erstelle ich eine CSS-Bildüberlagerung mit unterschiedlichen Höhen, aber gleichbleibender Breite?

CSS-Overlay auf Bildern: Eine umfassende Anleitung

Einführung

Das Erstellen eines Bild-Overlays ist eine häufige Aufgabe im Webdesign. Sie können einem Bild Text, Symbole oder andere Informationen hinzufügen und so einen optisch ansprechenden und informativen Effekt erzielen. In diesem Artikel untersuchen wir, wie wir dies mithilfe von CSS erreichen können, und konzentrieren uns dabei insbesondere auf den Fall, dass Bilder unterschiedliche Höhen haben und gleichzeitig eine einheitliche Breite beibehalten.

Erstellen der Bildüberlagerung

Um diesen Effekt zu erzielen, verwenden wir einen Div-Container, um das Bild und den Overlay-Inhalt zu speichern. Die folgenden CSS-Regeln erstellen das Overlay:

.image-container {
    position: relative;
    width: 200px;
}

.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    color: #FFF;
}

.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

HTML-Struktur

Die HTML-Struktur enthält das Bild und den Overlay-Inhalt:

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

Verbesserung des Overlays

Um das Erscheinungsbild des Overlays zu verbessern, können wir zusätzliche CSS-Stile hinzufügen. Zum Beispiel:

.image-container .after .content {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    padding: 5px;
}

Dadurch wird der Overlay-Inhalt unten vertikal ausgerichtet.

Benutzerdefinierte Demo

Hier ist eine komplexere Demo mit Extras Stil, wie ein Symbol und Text:

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
}

.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);
}

.image-container .after .content {
    position: absolute;
    bottom: 0;
    font-family: Arial;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    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;
}

<div class="image-container">
    <img src="image.jpg">
    <div class="after">
        <span class="content">This is some content. It can be long and span several lines.</span>
        <span class="zoom"><i class="fa fa-search"></i></span>
    </div>
</div>

Diese aktualisierte Demo fügt dem Overlay ein animiertes Zoom-Symbol hinzu, das für zusätzliches visuelles Interesse sorgt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine CSS-Bildüberlagerung mit unterschiedlichen Höhen, aber gleichbleibender Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!