INTENSIVSTATION

CSS Filter – Übung

Aufgabe

Ziel: Erstelle eine Card mit folgenden Eigenschaften:

  1. Bild ist schwarz-weiss
  2. Beim Hover:
    – Farben erscheinen
    – Bild wird leicht heller
    – Weicher Übergang
  3. Optional:
    Ein leichter Schatten nur beim Hover

Gegeben ist folgendes HTML:

<div class="card">
    <img src="bild.jpg" alt="Demo">
</div>

Deine CSS-Aufgabe

CSS Nesting ist modernes CSS.

  • Nutze filter
  • Nutze transition
  • Optional: drop-shadow

Lösung

.card img {
  width: 300px;
  filter: grayscale(100%) brightness(0.9);
  transition: filter 0.4s ease;
}

.card img:hover {
  filter: grayscale(0%) brightness(1.1)
          drop-shadow(0 10px 20px rgba(0,0,0,0.4));
}

Schau dir die Lösung an.

Bonus-Challenge

  1. Baue eine Animation mit hue-rotate()
  2. Simuliere Glasmorphism mit backdrop-filter

Bonus-Challenge 1: Animation mit hue-rotate()

Ziel: Das Bild soll ständig seine Farben wechseln – wie ein sanfter Farbzyklus.

Lösung mit CSS Animation

.card img {
  width: 300px;
  animation: colorShift 6s linear infinite;
}

@keyframes colorShift {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

Schau dir die Lösung an

Erklärung

  • 360deg = kompletter Farbkreis
  • linear = gleichmässiger Übergang
  • infinite = Endlosschleife

Tip

Kombinierbar mit anderen Filtern:

filter: saturate(140%) hue-rotate(180deg);

Hover-Version (dezenter & UX-freundlich)

.card img {
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

.card img:hover {
  filter: grayscale(0%) hue-rotate(180deg) saturate(150%);
}

Schau dir die Lösung an

Bonus-Challenge 2: Glasmorphism mit backdrop-filter

Ziel: Eine halbtransparente Karte mit Blur-Effekt auf den Hintergrund.

HTML

<div class="glass-card">
    <h2>Glas Effekt</h2>
    <p>CSS ist Magie</p>
</div>

CSS

.glass-card {
  width: 300px;
  padding: 20px;
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

  color: #fff;
}

Schau dir die Lösung an

Erklärung

  • rgba(..., 0.25) = lässt Hintergrund durch
  • backdrop-filter: blur() = verwischt nur das dahinter
  • border + shadow = Glas-Illusion

Ausprobieren-> Kombination aus beiden

.glass-card:hover {
  backdrop-filter: blur(20px) hue-rotate(25deg);
  transition: backdrop-filter 0.4s ease;
}

Ergebnis: Glas + sanfter Farbshift beim Hover

Download alle CSS Filter Lösungen | zurück zur Filter Lektion