Spürbar, aber edel — nie nur ein Standard-Hover. Jeder Baustein ist
in sich abgeschlossen (eigenes scoped CSS) und direkt einsetzbar.
Karte: Hintergrund dunkel → hell
Pol 1 · CraftAnlass: Leistungs-/Feature-Karten
Dezent genug auch für Kundenseiten. Vorbild: animate-ui, Sektion „Other animated distributions". Reagiert auch auf Tastatur-Fokus eines Links in der Karte (:focus-within).
Mattglas legt sich beim Hover über die Kachel. Sparsam einsetzen. Vorbild: aceternity, Sektion „Projects". (Hintergrund hier als Verlauf statt echtem Bild — DSGVO/offline-sicher.)
Sanftes Aufklappen über den grid-rows-Trick (animierbare Höhe ohne JS). Vorbild: aceternity „Always Pushing the Boundaries…". Hinweis: am Handy gibt es kein Hover — dort besser per Klick/Akkordeon lösen.
Küchenmontage
Anschluss von Spüle, Geräten und Arbeitsplatte inklusive.
Elementunabhängige Utility-Klasse: ein diagonaler Lichtschleier wandert einmal über das Element. Per ::before + overflow:hidden + isolation sauber gekapselt — funktioniert auf Buttons wie auf Karten. Vorbild: NDS (systemweite Hover-Utilities).
Pol 1 · CraftAnlass: Aufmerksamkeits-CTA, Aktions-Button
Utility-Klasse .fx-blink: beim Hover hebt sich das Element leicht an und ein eng anliegender Glow pulsiert in der Akzentfarbe. Bewusst sparsam einsetzen — höchstens ein Element pro Ansicht. Vorbild: NDS (systemweite Hover-Utilities).
Ruhiger Vergrößerungs-Hover (scale(1.03)) mit Border-Wechsel zur Akzentfarbe. Der Effekt ist in @media (hover:hover) gekapselt (kein „Hängenbleiben" auf Touch) und in prefers-reduced-motion neutralisiert. Vorbild: Hauszeit (Feature-Karten).
Pol 2 · KlarheitAnlass: Schließen-Button, Icon-Aktion
Runder Icon-Button, der beim Hover um 90° dreht und aufhellt — klassisch für Modal-Schließen oder Toggle-Aktionen. Vorbild: Silver Mountain (Event-Modal-Close).
Pol 1 · CraftAnlass: Hilfe-Hinweis, Icon-Erklärung
Beim Hover oder Tastatur-Fokus erscheint über dem Auslöser ein Tooltip mit kleinem Pfeil — sanft einblendend und leicht aufsteigend. Kein JS. A11y: Auslöser ist fokussierbar, das Tooltip-Element trägt role="tooltip" und ist per aria-describedby verknüpft; es reagiert auf :hoverund:focus-visible. Vorbild: animate-ui „Tooltip".
Pol 1 · CraftAnlass: kompakte UI-Hinweise, Toolbars
Dieselbe Mechanik wie oben, aber die Position wird per Modifier-Klasse umgestellt: --top, --right, --bottom, --left. Pfeil und Einblende-Richtung passen sich jeweils an. Gleiche A11y-Regeln (role="tooltip" + aria-describedby, :hover und :focus-visible), reduced-motion neutralisiert die Bewegung. Reines CSS.
Pol 1 · CraftAnlass: Referenz-Galerie, Blog-Teaser
Das Bild zoomt beim Hover/Fokus sanft heran, während der Rahmen es sauber beschneidet (overflow:hidden) — die Beschriftung rückt leicht hoch. Nur das innere Element bewegt sich, der Rahmen bleibt fest. Hintergrund hier als CSS-Verlauf statt echtem Bild (offline-/DSGVO-sicher); für Live ein <img> mit width/height:100%;object-fit:cover einsetzen.
Drei ruhige Link-Unterstriche als Modifier einer .fx-ul-Basis: --center läuft aus der Mitte auf, --wipe von links ein, --swap tauscht eine graue Ruhelinie gegen die Akzentlinie. Reines CSS über ::after (bzw. zwei Ebenen bei Swap), animiert wird nur die Breite/Skalierung. Reagiert auf :hover und Tastatur-Fokus.
<a href="#" class="fx-ul fx-ul--center">Aus der Mitte</a>
<a href="#" class="fx-ul fx-ul--wipe">Von links</a>
<a href="#" class="fx-ul fx-ul--swap">Linie tauschen</a>
<style>
.fx-ul{position:relative;color:#e9e9ee;text-decoration:none;font-weight:600;font-size:.98rem;padding:2px 1px}
.fx-ul:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:4px;border-radius:3px}
/* A: aus der Mitte auf */
.fx-ul--center::after{content:"";position:absolute;left:50%;right:50%;bottom:-2px;height:2px;
background:var(--akzent,#7c87ff);transition:left .3s ease,right .3s ease}
.fx-ul--center:hover::after,.fx-ul--center:focus-visible::after{left:0;right:0}
/* B: von links einlaufend */
.fx-ul--wipe::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
background:var(--akzent,#7c87ff);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.fx-ul--wipe:hover::after,.fx-ul--wipe:focus-visible::after{transform:scaleX(1)}
/* C: alte Linie raus, neue rein */
.fx-ul--swap::before,.fx-ul--swap::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px}
.fx-ul--swap::before{background:#3a3a42}
.fx-ul--swap::after{background:var(--akzent,#7c87ff);transform:scaleX(0);transform-origin:right;transition:transform .3s ease}
.fx-ul--swap:hover::after,.fx-ul--swap:focus-visible::after{transform:scaleX(1);transform-origin:left}
@media (prefers-reduced-motion:reduce){
.fx-ul--center::after,.fx-ul--wipe::after,.fx-ul--swap::after{transition:none}}
</style>
Karte: Lift + Akzent-Glow
Pol 1 · CraftAnlass: Leistungs-Karten, Preis-Karten
Die Karte hebt sich beim Hover/Fokus deutlich an und bekommt einen weichen Schein in der Akzentfarbe (Rand-Highlight + farbiger Schatten). Der Hover-Anteil ist in @media (hover:hover) gekapselt, damit auf Touch nichts hängen bleibt; Tastatur-Fokus löst denselben Zustand aus.
<a href="#" class="fx-lift">
<span class="fx-lift-tag">Beliebt</span>
<h3>Komplett-Paket</h3>
<p>Planung, Material und Montage aus einer Hand — zum Festpreis.</p>
</a>
<style>
.fx-lift{display:block;width:100%;max-width:280px;text-decoration:none;
background:#16161a;border:1px solid #26262c;border-radius:16px;padding:1.4rem 1.5rem;color:#e9e9ee;
transition:transform .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s ease,border-color .3s ease}
.fx-lift h3{margin:0 0 .45rem;font-size:1.05rem;color:#f4f4f5}
.fx-lift p{margin:0;font-size:.9rem;color:#a1a1aa;line-height:1.5}
.fx-lift-tag{display:inline-block;margin-bottom:.7rem;padding:.2rem .6rem;border-radius:99px;
font-size:.74rem;font-weight:600;letter-spacing:.03em;
background:rgba(124,135,255,.14);color:var(--akzent,#7c87ff)}
@media (hover:hover){
.fx-lift:hover{transform:translateY(-6px);border-color:var(--akzent,#7c87ff);
box-shadow:0 18px 40px -18px rgba(0,0,0,.7),0 0 0 1px rgba(124,135,255,.25),
0 0 26px -6px rgba(124,135,255,.45)}}
.fx-lift:focus-visible{transform:translateY(-6px);border-color:var(--akzent,#7c87ff);
box-shadow:0 18px 40px -18px rgba(0,0,0,.7),0 0 26px -6px rgba(124,135,255,.45);outline:none}
@media (prefers-reduced-motion:reduce){
.fx-lift{transition:none}
.fx-lift:hover,.fx-lift:focus-visible{transform:none}}
</style>
Text-Swap (Zeile schiebt hoch)
Pol 1 · CraftAnlass: Text-Link, Menü-Punkt
Beim Hover/Fokus schiebt der sichtbare Text nach oben aus dem Sichtfeld, ein zweiter (in der Akzentfarbe) rückt von unten nach — zwei Ebenen in einem overflow:hidden-Element per translateY. Beide Zeilen tragen denselben Text, das zweite <span> ist rein dekorativ (aria-hidden), damit Screenreader nur einmal vorlesen.
Pol 1 · CraftAnlass: Highlight-Karte, Premium-Tarif
In Ruhe hat die Karte einen neutralen Rahmen; beim Hover/Fokus blendet ein diagonaler Akzent-Verlauf als Rand ein. Umsetzung ohne Bild: der Verlauf liegt als ::before unter einer inneren Fläche, die padding-Lücke von 1px wird zum sichtbaren Rand. Der Verlauf nutzt color-mix, passt sich also an --akzent an.