Hebe ein Element bei Hover und Tastaturfokus mit einer leichten Verschiebung und einem tieferen Schatten an.

Der Helfer .hover-lift zeigt auf einfache Weise, dass Karten, Kacheln oder andere Flächen anklickbar sind. Er setzt nur transform und box-shadow und lässt sich deshalb mit jedem Element kombinieren.

• Hover und Fokus: Wirkt bei Maus und Tastatur gleichermaßen.
• Anpassbar: Abstand, Schatten und Timing über CSS-Variablen.
• Reduzierte Bewegung: Bei prefers-reduced-motion entfällt die Animation, Schatten und Versatz bleiben.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Funktionsweise

Setze .hover-lift an ein beliebiges Element. Bei Hover oder Tastaturfokus verschiebt es sich ein Stück nach oben und bekommt einen kräftigeren Schatten – ein dezenter Hinweis, dass die Fläche interaktiv ist.

Der Effekt basiert auf CSS-Variablen und nutzt das transition()-Mixin von Bootstrap. Er ist dadurch voll anpassbar und berücksichtigt automatisch prefers-reduced-motion: Wer reduzierte Bewegung eingestellt hat, sieht Schatten und Versatz ohne Animation.

Beispiel

Fahr mit der Maus über die Karte oder springe per Tab-Taste darauf, um den Effekt zu sehen.

<a href="#" class="card hover-lift text-decoration-none" style="max-width: 20rem;">
    <div class="card-body">
      <h5 class="card-title">Fahr mit der Maus darüber</h5>
      <p class="card-text mb-0">Diese Karte hebt sich bei Hover und Tastaturfokus an.</p>
    </div>
  </a>

Da nur transform und box-shadow gesetzt werden, funktioniert .hover-lift mit Buttons, Listeneinträgen oder einfachen Containern genauso.

<button type="button" class="btn-solid theme-primary hover-lift">Hebt sich bei Hover</button>

Anpassen

Über die CSS-Variablen des Helfers stellst du Hubhöhe, Schatten und Timing ein. Im Beispiel hebt sich die Karte weiter an und reagiert schneller:

<a href="#" class="card hover-lift text-decoration-none" style="--bs-hover-lift-transform: translateY(-.5rem); --bs-hover-lift-transition-duration: .1s; max-width: 20rem;">
    <div class="card-body">
      <h5 class="card-title">Stärkeres Anheben</h5>
      <p class="card-text mb-0">Angepasste Verschiebung und Dauer.</p>
    </div>
  </a>

Die vollständige Liste der CSS-Variablen und den Sass-Quelltext findest du in der Originaldoku.