CSS - Overlay: Ein Anfängerleitfaden zur Erstellung dynamischer Web-Effekte

Hallo da draußen, zukünftige Webdesign-Superstars! Heute tauchen wir ein in die faszinierende Welt der CSS-Overlays. Machen Sie sich keine Sorgen, wenn Sie neu hier sind – ich erinnere mich an mein erstes Mal, als ich Overlays gelernt habe, und ich verspreche Ihnen, dass Sie es sowohl unterhaltsam als auch lohnend finden werden. Also, lasst uns gemeinsam auf diese Reise gehen!

Was ist ein CSS-Overlay?

Bevor wir uns dem Code widmen, lassen Sie uns verstehen, was ein Overlay ist. Stellen Sie sich vor, Sie schauen auf ein wunderschönes Gemälde und plötzlich platzieren jemand eine durchsichtige Folie darüber mit etwas Text. Das ist im Grunde genommen, was ein Overlay auf einer Webseite macht – es fügt eine zusätzliche Schicht über bestehenden Inhalt hinzu, oft um zusätzliche Informationen bereitzustellen oder visuelle Effekte zu erzeugen.

CSS Overlay - Grundlegendes Beispiel

Lassen Sie uns mit einem einfachen Overlay-Beispiel beginnen. Hier ist der HTML- und CSS-Code:

<div class="container">
<img src="cute-puppy.jpg" alt="Ein süßes Hundebaby">
<div class="overlay">
<div class="text">Hallo, ich bin ein Hundebaby!</div>
</div>
</div>

.container {
position: relative;
width: 100%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

Lassen Sie uns das durcharbeiten:

1. Wir haben einen Container mit einem Bild und einem Overlay-Element.
2. Das Overlay ist innerhalb des Containers absolut positioniert.
3. Initially, das Overlay hat eine Opazität von 0 (unsichtbar).
4. Wenn wir über den Container hinwegfahren, ändert sich die Opazität des Overlays auf 1 (voll sichtbar).
5. Der Text ist zentriert innerhalb des Overlays.

CSS Overlay - Top to Bottom Sliding

Nun, lassen Sie uns mit einem Schiebeeffekt die Dinge interessanter gestalten! Hier ist, wie wir unseren CSS so ändern können, dass das Overlay von oben nach untengleitet:

.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}

.container:hover .overlay {
bottom: 0;
height: 100%;
}

In diesem Beispiel startet das Overlay oberhalb des Bildes (bottom: 100%) mit keiner Höhe. Beim Hovern gleitet es nach unten, um das gesamte Bild abzudecken.

CSS Overlay - Bottom to Top Sliding

Was ist, wenn wir das Overlay nach oben gleiten lassen möchten? Ganz einfach! Ändern Sie nur einige Zeilen:

.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}

.container:hover .overlay {
height: 100%;
}

Nun startet das Overlay unten und dehnt sich nach oben aus, wenn man darüber fährt.

CSS Overlay - Left to Right Sliding

Lassen Sie uns die Richtung wechseln und das Overlay von links nach rechts gleiten lassen:

.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 100%;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}

.container:hover .overlay {
width: 100%;
right: 0;
}

Hier startet das Overlay mit keiner Breite auf der linken Seite und dehnt sich auf die volle Breite aus, wenn man darüber fährt.

CSS Overlay - Right to Left Sliding

Und natürlich können wir es auch von rechts nach links gleiten lassen:

.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}

.container:hover .overlay {
width: 100%;
left: 0;
}

Diesmal startet das Overlay auf der rechten Seite und gleitet links, wenn man darüber fährt.

CSS Overlay - Fade Effect

Erinnern Sie sich an unser erstes Beispiel? Das war actually ein Verblasseneffekt! Lassen Sie uns ihn noch smoother machen:

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.container:hover .overlay {
opacity: 1;
}

Dies erzeugt einen sanften Einblendeffekt, wenn man über das Bild fährt.

CSS Overlay - Image Title Overlay

Lassen Sie uns ein Overlay erstellen, das den Bildtitel beim Hovern anzeigt:

<div class="container">
<img src="cute-puppy.jpg" alt="Ein süßes Hundebaby" class="image">
<div class="overlay">
<div class="title">Unglaublich süßes Hundebaby</div>
</div>
</div>

.container {
position: relative;
width: 100%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}

.container:hover .overlay {
opacity: 1;
}

Dies erstellt ein Titel-Overlay, das von unten auf dem Bild beim Hovern erscheint.

CSS Overlay - Image Icon Overlay

Nun fügen wir ein Symbol-Overlay unserem Bild hinzu:

<div class="container">
<img src="cute-puppy.jpg" alt="Ein süßes Hundebaby" class="image">
<div class="overlay">
<a href="#" class="icon" title="Benutzerprofil">
<i class="fa fa-user"></i>
</a>
</div>
</div>

.container {
position: relative;
width: 50%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.container:hover .overlay {
opacity: 1;
}

.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.fa-user:hover {
color: #eee;
}

Dies erstellt ein Symbol-Overlay, das in der Mitte des Bildes beim Hovern erscheint.

CSS Overlay - verwandte Eigenschaften

Hier ist eine Tabelle der häufig mit CSS-Overlays verwendeten Eigenschaften:

Eigenschaft	Beschreibung
position	Legt die Positionierungsmethode fest
top, bottom, left, right	Gibt die Position des Overlays an
width, height	Setzt die Abmessungen des Overlays
opacity	Steuert die Transparenz des Overlays
transition	Definiert, wie das Overlay erscheint/verschwindet
background-color	Setzt die Farbe des Overlays
z-index	Steuert die Stapelreihenfolge der Elemente

Und das war's, Leute! Sie haben gerade die Grundlagen der CSS-Overlays gelernt. Denken Sie daran, Übung macht den Meister, also fürchten Sie sich nicht, diese Beispiele auszuprobieren. Wer weiß? Vielleicht erstellen Sie den nächsten großen Trend im Webdesign! Frohes Coden und möge Ihre Overlays immer glatt sein und Ihre Übergänge immer nahtlos!

Credits: Image by storyset