css mit Adi Prinz

Karte beim Berühren anheben

Bewege den Mauszeiger über die Karte. Du kannst den Link auch mit der Tab-Taste auswählen. Durch :focus-within wird die Karte ebenfalls hervorgehoben, sobald sich der Tastaturfokus innerhalb der Karte befindet.

.hover-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  transform: translateY(0);

  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.hover-card:hover,
.hover-card:focus-within {
  background-color: #faf8ff;
  box-shadow: 0 14px 28px rgb(0 0 0 / 25%);
  transform: translateY(-10px);
}

Mit transform: translateY() wird die Karte nur optisch verschoben. Die umgebenden Elemente verändern ihre Position nicht.

Tastaturbedienung mit :focus-within

Der Hover-Effekt allein ist für Benutzer einer Tastatur nicht erreichbar. Die Pseudoklasse :focus-within wird aktiv, sobald ein fokussierbares Element innerhalb der Karte den Tastaturfokus erhält.

.hover-card:hover,
.hover-card:focus-within {
  box-shadow: 0 14px 28px rgb(0 0 0 / 25%);
  transform: translateY(-10px);
}

Enthält eine Karte einen Link oder Button, sollte ein Hover-Effekt immer auch für die Tastaturbedienung angeboten werden.

Bewegung reduzieren

Bei aktivierter Einstellung für reduzierte Bewegung kann die optische Verschiebung entfernt werden. Die Hervorhebung durch Hintergrundfarbe und Schatten bleibt weiterhin sichtbar.

@media (prefers-reduced-motion: reduce) {
  .hover-card {
    transition: none;
  }

  .hover-card:hover,
  .hover-card:focus-within {
    transform: none;
  }
}

Bild innerhalb der Karte vergrößern

Bewege den Mauszeiger über die Karte oder wähle den Link mit der Tab-Taste aus. Das Bild wird vergrößert und gleichzeitig abgedunkelt.

Moderne Webentwicklung

Mit Transitionen lassen sich Bilder, Texte und Bedienelemente innerhalb einer Karte gemeinsam hervorheben.

Beispiel ansehen

.image-card {
  position: relative;
  overflow: hidden;
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.75);
  transform: scale(1);

  transition:
    filter 0.5s ease,
    transform 0.5s ease;
}

.image-card:hover img,
.image-card:focus-within img {
  filter: brightness(0.5);
  transform: scale(1.1);
}

overflow: hidden verhindert, dass das vergrößerte Bild über den Rand der Karte hinausragt.

Zusätzlichen Text einblenden

Der Beschreibungstext ist im Ausgangszustand verborgen. Beim Berühren oder Fokussieren wird seine Höhe erweitert und der Text bewegt sich nach oben.

.image-card-text {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);

  transition:
    max-height 0.5s ease,
    margin 0.5s ease,
    opacity 0.4s ease,
    transform 0.5s ease;
}

.image-card:hover .image-card-text,
.image-card:focus-within .image-card-text {
  max-height: 120px;
  margin-bottom: 18px;
  opacity: 1;
  transform: translateY(0);
}

Der Wert height: auto kann nicht direkt von height: 0 aus animiert werden. Für eine einfache Lösung wird deshalb max-height verwendet.

Link zeitversetzt anzeigen

Der Link erscheint etwas später als der Beschreibungstext. Dafür wird bei der Transition eine kurze Verzögerung angegeben.

.image-card-link {
  opacity: 0;
  transform: translateY(20px);

  transition:
    background-color 0.2s ease,
    opacity 0.4s ease 0.1s,
    transform 0.5s ease 0.1s;
}

.image-card:hover .image-card-link,
.image-card:focus-within .image-card-link {
  opacity: 1;
  transform: translateY(0);
}

Der letzte Wert 0.1s ist die transition-delay. Die Bewegung beginnt dadurch erst nach einer kurzen Verzögerung.

Kleine zeitliche Abstufungen können mehrere Bewegungen übersichtlicher wirken lassen. Zu lange Verzögerungen erschweren jedoch die Bedienung.

Hover-Effekt mit der Tastatur auslösen

Der Link in der Karte kann mit der Tastatur erreicht werden. Sobald er den Fokus erhält, wird :focus-within für die gesamte Karte aktiv.

.image-card:hover img,
.image-card:focus-within img {
  filter: brightness(0.5);
  transform: scale(1.1);
}

.image-card:hover .image-card-text,
.image-card:focus-within .image-card-text {
  max-height: 120px;
  opacity: 1;
  transform: translateY(0);
}

Die sichtbare Beschriftung und der Link müssen auch ohne Animation verständlich und mit der Tastatur erreichbar bleiben.

Zeitversetzte Karten anzeigen

Beim Laden der Seite bewegen sich die Karten von unten nach oben. Gleichzeitig wird ihre Deckkraft von 0 auf 1 erhöht.

@keyframes karte-einblenden {
  from {
    opacity: 0;
    transform: translateY(35px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.staggered-card {
  opacity: 0;
  transform: translateY(35px);

  animation: karte-einblenden 0.7s ease-out forwards;
}

Die Kombination aus opacity und transform erzeugt eine ruhige Einblendung. Das Schlüsselwort forwards behält den letzten Zustand der Animation bei.

Start mit animation-delay verzögern

Alle Karten verwenden dieselbe Animation. Nur der Startzeitpunkt wird mit animation-delay verändert.

.staggered-card:nth-child(2) {
  animation-delay: 0.2s;
}

.staggered-card:nth-child(3) {
  animation-delay: 0.4s;
}

Die erste Karte startet sofort, die zweite nach 0.2s und die dritte nach 0.4s.

Kleine Verzögerungen lassen die Reihenfolge erkennen, ohne dass Benutzer lange auf den Inhalt warten müssen.

Endzustand mit forwards beibehalten

Ohne forwards würde eine Karte nach dem Ende der Animation wieder zu ihrem ursprünglichen Zustand zurückkehren. Sie wäre erneut unsichtbar und nach unten verschoben.

.staggered-card {
  animation: karte-einblenden 0.7s ease-out forwards;
}

forwards ist ein Wert der Eigenschaft animation-fill-mode. Dadurch bleiben die Angaben des letzten Keyframes nach dem Ende der Animation erhalten.

Inhalte während der Verzögerung

Die Karten besitzen bereits vor dem Beginn der Animation opacity: 0. Dadurch sind auch die verzögert startenden Karten zunächst unsichtbar.

.staggered-card {
  opacity: 0;
  transform: translateY(35px);
}

.staggered-card:nth-child(3) {
  animation-delay: 0.4s;
}

Die Ausgangswerte sollten zusätzlich außerhalb der @keyframes-Regel stehen. So bleiben die Karten während der Verzögerung im vorgesehenen Ausgangszustand.

Karten responsiv anordnen

Auf kleinen Bildschirmen stehen die Karten untereinander. Ab einer Breite von 768px werden sie in drei Spalten dargestellt.

.staggered-card-example {
  display: grid;
  gap: 25px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .staggered-card-example {
    grid-template-columns: repeat(3, 1fr);
  }
}

Die Animation ist von der Anordnung unabhängig. Dieselben Karten können daher sowohl untereinander als auch nebeneinander eingeblendet werden.

Animation bei reduzierter Bewegung entfernen

Wenn reduzierte Bewegung eingestellt ist, werden die Karten ohne Verzögerung und ohne Verschiebung angezeigt.

@media (prefers-reduced-motion: reduce) {
  .staggered-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

opacity: 1 ist hier besonders wichtig. Ohne diese Angabe würden die Karten nach dem Abschalten der Animation unsichtbar bleiben.