Einfaches Ein- und Ausblenden beim Hover mit CSS3

In der jQuery-Ära nutzten wir .animate() oder .fadeIn() für Hover-Effekte. 2026 ist JavaScript dafür unnötiger Overhead. CSS transition läuft oft auf der GPU, bleibt weich und braucht kein Skript. Dieser Leitfaden zeigt Fade-Hover von der Basis bis zu Galerie-, Button- und WordPress-Praxis, inklusive Barrierefreiheit.

#Warum CSS-Transitions statt JavaScript für Hover

• Weniger Main-Thread-Arbeit: Kein Timer, kein Style-Recalc in JS.
• Browser-Optimierung: Der Engine kann Compositor-freundliche Properties priorisieren.
• Weniger Abhängigkeiten: Kein jQuery nur für Opacity.
• Bessere Batterie: Weniger CPU-Wakeups auf Mobilgeräten.

JavaScript bleibt sinnvoll für Scroll-Trigger, gestaffelte Sequenzen oder Zustände, die CSS allein nicht abbildet. Für «Bild wird beim Hover etwas transparenter» ist CSS die richtige Schicht.

#Wie ein einfacher CSS-Fade beim Hover funktioniert

Angenommen, ein Bild soll beim Hover leicht abdunkeln.

.hover-image {
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}

.hover-image:hover,
.hover-image:focus-visible {
	opacity: 0.7;
}

Ablauf:

1. Start bei opacity: 1.
2. Beim Hover oder Tastaturfokus Übergang zu 0.7.
3. Dauer 0,3 Sekunden mit weichem Easing.
4. Rückweg automatisch, wenn der Zustand endet.

:focus-visible ist Pflicht, wenn das Bild oder die Karte fokussierbar ist. Sonst erreichen Tastatur-Nutzer denselben Zustand nicht.

#Unterschied zwischen transition und animation in CSS

transition und animation sind keine austauschbaren Werkzeuge. Entscheidend ist, was die Bewegung auslöst.

transition passt, wenn:

• sich eine Eigenschaft zwischen zwei Zuständen ändert (Hover, Fokus, Klasse offen oder geschlossen),
• der Browser vom aktuellen Wert aus zu einem neuen Wert interpolieren soll,
• der Effekt auf halbem Weg umkehren soll, wenn der Nutzer die Maus wegbewegt.

@keyframes / animation passt, wenn:

• die Bewegung ohne Interaktion laufen soll (Laden, dezenter Puls, Intro),
• mehrere Keyframes, Verzögerungen pro Schritt oder animation-iteration-count nötig sind,
• der Zustand keine einfache Änderung von A nach B ist.

/* Transition: durch Zustandswechsel ausgelöst */
.btn {
  opacity: 1;
  transition: opacity 0.2s ease-out;
}
.btn:hover {
  opacity: 0.85;
}

/* Animation: zeitgesteuerte Sequenz */
@keyframes fade-in-once {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero-title {
  animation: fade-in-once 0.4s ease-out both;
}

Ein häufiger Fehler in Themes ist, Hover mit einer endlosen animation zu “animieren” und danach gegen animation-fill-mode anzukämpfen. Für Hover ist transition fast immer die sauberere Lösung.

#Welche CSS-Transition-Eigenschaften Sie brauchen

#transition-property

Animierte Eigenschaften immer benennen. all ist bequem und teuer.

/* Gut */
transition-property: opacity;

/* Besser bei Kombi */
transition-property: opacity, transform;

/* Vermeiden */
transition-property: all;

#transition-duration

#transition-timing-function

transition-timing-function: ease-out;     /* oft am natürlichsten für Hover */
transition-timing-function: ease-in-out;  /* weicher Hin- und Rückweg */
transition-timing-function: linear;       /* wirkt mechanisch */

ease-out startet zügig und bremst ab. Das passt zu UI-Feedback besser als lineares Tempo.

#Wie die CSS-Transition-Kurzschreibweise funktioniert

/* property | duration | timing | delay */
.card-img {
	transition: opacity 0.25s ease-out, transform 0.3s ease-out;
}

.card-img:hover {
	opacity: 0.85;
	transform: scale(1.03);
}

.button-fade {
	transition: opacity 0.2s ease-out 0.05s; /* 50 ms Verzögerung */
}

Die Verzögerung (transition-delay) ist nützlich, wenn eine innere Ebene auf eine äußere warten soll. Beim einfachen Bild-Fade bleibt sie meist bei 0s. Delay sparsam einsetzen. Auf Listen wirkt gestaffeltes Delay oft unecht; ein gemeinsamer Start wirkt ruhiger.

#Welche Hover-Muster mit CSS Transitions funktionieren

#Fade plus leichter Zoom

.card-img {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.3s ease-in-out, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-img:hover,
.card-img:focus-visible {
	opacity: 0.9;
	transform: scale(1.05);
}

transform und opacity sind die sicheren Partner. Vermeiden Sie animiertes width, height, top oder margin. Die erzwingen Layout und fühlen sich auf Mittelklasse-Handys ruckelig an.

#Bild mit Text-Overlay

.image-container {
	position: relative;
}

.image-container img {
	display: block;
	width: 100%;
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}

.image-container .caption {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.image-container:hover img,
.image-container:focus-within img {
	opacity: 0.65;
}

.image-container:hover .caption,
.image-container:focus-within .caption {
	opacity: 1;
}

focus-within hält die Beschriftung sichtbar, wenn ein Link in der Karte fokussiert ist. Reines :hover reicht auf Touch-Geräten nicht.

#Button-Fade

.btn-ghost {
	opacity: 0.85;
	transition: opacity 0.2s ease-out, background-color 0.2s ease-out;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
	opacity: 1;
}

Hier bleibt der Kontrast im Blick: Opacity darf nicht so weit sinken, dass der Text die Kontrastanforderungen verfehlt.

#Wie Sie Hover-Effekte barrierefrei halten

Nicht jeder will Bewegung. Manche Nutzer melden Übelkeit oder Konzentrationsprobleme.

@media (prefers-reduced-motion: reduce) {
	.hover-image,
	.card-img,
	.image-container img,
	.image-container .caption,
	.btn-ghost {
		transition: none;
	}
}

Zusätzlich:

• Kontrast der Endzustände prüfen (besonders bei Overlay-Text).
• Keine Information nur im Hover verstecken, die für die Aufgabe nötig ist.
• Touch: erster Tap darf nicht nur «Hover simulieren» und den Klick stehlen.
• Teilweise reicht es, unter prefers-reduced-motion nur transform abzuschalten und den Opacity-Fade zu behalten, mehr dazu im Abschnitt zu WCAG weiter unten.

#Wo Hover-CSS in WordPress hingehört

1. Child-Theme style.css oder assets/css/hover.css: versioniert, reviewbar.
2. wp_enqueue_style nur auf Templates mit Galerie: spart Bytes auf dem Rest der Site.
3. Theme.json / Block-Styles: wenn der Effekt zu einem Block-Pattern gehört.
4. Zusätzliches CSS im Customizer: nur für kurze Hotfixes, nicht für Design-Systeme.

add_action( 'wp_enqueue_scripts', function () {
	if ( ! is_singular() ) {
		return;
	}
	if ( ! has_block( 'core/gallery', get_post()->post_content )
		&& ! has_block( 'core/image', get_post()->post_content ) ) {
		return;
	}
	wp_enqueue_style(
		'theme-hover-fade',
		get_stylesheet_directory_uri() . '/assets/css/hover-fade.css',
		array(),
		'2026.09.20'
	);
} );

Page-Builder-Globals, die denselben Fade auf jeder URL laden, sind der häufigste Performance-Fehler in Audits.

#Welche Fehler bei CSS-Hover-Fades häufig sind

• transition: all 1s auf großen Layout-Containern.
• Animiertes height: auto (funktioniert unzuverlässig und teuer).
• Hover ohne Focus-Zustand.
• Opacity unter 0,5 auf Fließtext.
• Effekt nur in Inline-Styles im Beitrag, unmöglich zentral zu pflegen.
• Doppelte Transitions in Builder und Theme, die gegeneinander kämpfen.

#Wie Sie Fade-Hover im Gutenberg-Galerie-Block setzen

Der Core-Block core/gallery rendert Bilder in Figure-Elementen. Sprechen Sie die inneren img-Tags über den Galerie-Wrapper an, nicht über globale img-Selektoren. Sonst erwischen Sie Logos, Avatare und Produktthumbs auf dem Rest der Seite.

.wp-block-gallery .wp-block-image img {
	opacity: 1;
	transition: opacity 0.25s ease-out, transform 0.3s ease-out;
}

.wp-block-gallery .wp-block-image a:hover img,
.wp-block-gallery .wp-block-image a:focus-visible img {
	opacity: 0.8;
	transform: scale(1.02);
}

Wenn die Galerie Links auf Attachments setzt, liegt der Focus auf dem Anker. Deshalb :focus-visible am Link, nicht nur :hover am Bild. In Theme-Audits fällt oft auf, dass jemand img:hover global setzt und damit den Header-Logo-Hover kaputt macht. Scope spart Support-Tickets.

Für Lightbox-Plugins gilt dieselbe Regel wie für Affiliate-Skripte: das Fade gehört in Ihr Theme, die Lightbox behält ihr eigenes Öffnen. Zwei konkurrierende Opacity-Transitionen fühlen sich doppelt und langsam an.

#Warum der Fade in Gutenberg-Blöcken nicht greift

Gutenberg verändert die DOM-Struktur stärker als klassische Templates. Ein Fade, der “im Classic Editor funktionierte”, scheitert meist an einem dieser Punkte.

#Falscher Selektor am Wrapper

Blöcke stecken oft in .wp-block-image, .wp-block-group oder figure/figcaption. Eine Regel, die direkt img:hover anspricht, greift nicht, wenn der Hover auf dem Link um das Bild passiert.

/* In vielen Block-Layouts zu eng */
.wp-block-image img:hover {
  opacity: 0.7;
}

/* Robuster */
.wp-block-image a:hover img,
.wp-block-image a:focus-visible img,
.wp-block-image figure:hover img {
  opacity: 0.7;
}

#Inline-Styles und Inhaltsbilder

Im Editor gesetzte Bildstile (style="width:...") konkurrieren nicht zwingend mit opacity, ein !important im Theme-Reset oder im Plugin-CSS dagegen schon. Halten Sie die Spezifität niedrig und einheitlich und verzichten Sie beim Fade auf !important.

#Zusätzliches CSS oder Block-Stylesheet

“Zusätzliches CSS” im Customizer reicht für Prototypen. Für die Produktion gehört der Code in eine eigene Datei per Enqueue oder in einen blockspezifischen Stil, registriert mit wp_enqueue_block_style, damit die Regeln nur dort laden, wo der Block vorkommt.

#Interaktivität und verschachtelte Blöcke

Gruppen-Blöcke mit Links darin können den Hover am Elternelement auslösen, während der Fokus auf einem Kind liegt. Testen Sie mit Maus und Tab. :focus-within am Karten-Wrapper löst viele dieser Fälle.

#Editor oder Frontend

Die Editor-Arbeitsfläche lädt nicht immer das Frontend-CSS des Themes. Wenn ein Kunde “den Fade im Editor nicht sieht”, ist das erwartbar, solange die Stile nicht zusätzlich über enqueue_block_assets oder add_editor_style geladen werden. Dokumentieren Sie den Unterschied: Der Effekt erscheint auf der Live-Seite, nicht unbedingt in der Arbeitsfläche.

#Welche CSS-Eigenschaften sich günstig animieren lassen

Wer Eigenschaften animiert, die Layout auslösen (width, height, top, left, margin), oder teures Paint verursacht (box-shadow auf riesigen Flächen ohne eigene Ebene), riskiert Ruckeln auf dem Smartphone.

Bevorzugt für Fade und Micro-Interactions:

• opacity
• transform (translate, scale, rotate)

Mit Vorsicht:

• filter: blur() auf großen Bildern (kann teuer sein)
• animierte box-shadow-Werte auf ganzen Bildschirmabschnitten
• transition: all

will-change: opacity auf jedem Bild eines Rasters ist selten nötig. will-change reserviert Speicher; setzen Sie es nur vorübergehend auf Elemente, die häufig animieren, oder überlassen Sie es dem Browser, die Ebene während der Transition anzuheben.

Messen Sie im Performance-Panel: Suchen Sie nach langen Frames beim Hover über einer Liste mit vielen Karten. Taucht Layout Thrashing auf, wird fast immer die falsche Eigenschaft animiert.

#Warum ein CSS-Fade nicht sichtbar wird

1. Prüfen Sie, ob Start- und Endwert sich tatsächlich unterscheiden.
2. Prüfen Sie, ob transition auf der Basis-Regel sitzt und nicht nur auf :hover. Die Transition wird aus dem Stil gelesen, in den das Element wechselt, ohne sie fehlt also der Rückweg.
3. Suchen Sie nach anderen Regeln, die global transition: none setzen.
4. Prüfen Sie prefers-reduced-motion im Betriebssystem.
5. In WordPress: Bestätigen Sie, dass das Stylesheet geladen wird (Quelltext oder Network-Tab) und der Selektor zum gerenderten Block-DOM passt.

#Welche transition-Regel gilt beim Start und Ende des Hovers

CSS Transitions Module Level 1 ist weiterhin ein W3C Working Draft, zuletzt veröffentlicht am 8. Januar 2026, und keine fertige Empfehlung. Die Spezifikation legt fest, dass Dauer, Verzögerung und Timing-Funktion aus dem after-change style des Elements stammen, also aus dem Stil, in den das Element wechselt. Fährt der Zeiger auf das Bild, gilt die transition der :hover-Regel. Verlässt der Zeiger das Bild, gilt die transition der Basisregel.

Daraus folgen zwei praktische Konsequenzen:

• Steht transition nur in :hover, blendet das Bild weich ab, springt beim Verlassen aber ohne Übergang zurück, weil die Basisregel keine Transition hat.
• Hin- und Rückweg lassen sich bewusst unterschiedlich schnell gestalten, etwa eine schnelle Reaktion beim Hineinfahren und eine ruhigere Rückkehr.

.hover-image {
  opacity: 1;
  transition: opacity 0.3s ease-out; /* gilt auf dem Rückweg */
}

.hover-image:hover {
  opacity: 0.7;
  transition-duration: 0.15s; /* gilt auf dem Hinweg */
}

Die Spezifikation regelt auch den Fall, dass der Zeiger das Element verlässt, bevor der Fade fertig ist. Abschnitt 3.1 über das schnellere Umkehren unterbrochener Transitions erklärt, dass ein Rückweg mit voller Dauer über eine kürzere Strecke unausgewogen wirkt. Deshalb wird die Rück-Transition über einen eigenen Faktor (reversing shortening factor) verkürzt, und die Timing-Funktion wird trotzdem vollständig durchlaufen, ohne mitten in die Kurve zu springen. JavaScript zur Berechnung der Restzeit ist also nicht nötig. Quelle: CSS Transitions Module Level 1.

#Zählt ein Opacity-Fade nach WCAG als Bewegung

Das WCAG-2.2-Erfolgskriterium 2.3.3 Animation from Interactions (Stufe AAA) verlangt, dass durch Interaktion ausgelöste Bewegungsanimation abschaltbar ist, sofern sie für Funktion oder Information nicht wesentlich ist. Das W3C-Erläuterungsdokument zu 2.3.3 grenzt den Begriff ab: Änderungen von Farbe oder Opacity, die wahrgenommene Größe, Form oder Position nicht verändern, gelten nicht als Bewegungsanimation. Ein Erratum hat Unschärfe aus dieser Ausnahme gestrichen, filter: blur() fällt also nicht mehr darunter.

Ein reiner Opacity-Fade liegt damit außerhalb von 2.3.3, während transform: scale() die wahrgenommene Größe ändert und darunter fällt. Das erlaubt eine genauere Reduced-Motion-Regel, als alles abzuschalten:

@media (prefers-reduced-motion: reduce) {
  .card-img {
    transform: none;
    transition: opacity 0.2s ease-out;
  }
}

MDN beschreibt denselben Ansatz in der Referenz zu prefers-reduced-motion: Eine Skalierungsanimation wird zu einer Überblendung abgeschwächt, die keine vestibulären Beschwerden auslöst. Der Wert reduce wird als wahr ausgewertet, @media (prefers-reduced-motion) ist also gleichbedeutend mit @media (prefers-reduced-motion: reduce).

Für den Fokus gilt ein anderes Kriterium. 2.4.7 Focus Visible (Stufe AA) verlangt einen sichtbaren Fokusindikator, und MDN verweist zusätzlich auf 1.4.11 Non-text Contrast, das für den Indikator mindestens 3:1 Kontrast fordert. Eine Opacity-Änderung an einem Bild erfüllt das selten allein, deshalb braucht der Fokus eine eigene outline oder einen box-shadow.

#Warum opacity 0 ein Element nicht versteckt

Die MDN-Referenz zu opacity nennt drei Punkte, die bei Hover-Effekten oft untergehen:

• Ein Element mit opacity: 0 ist unsichtbar, aber weiterhin Teil des DOM. Es empfängt Zeiger-Events und kann den Fokus erhalten, wenn es in der Tab-Reihenfolge liegt. Ein versteckter Overlay-Button lässt sich also anklicken und fokussieren. Machen Sie ihn bei Fokus sichtbar, oder schalten Sie Zeiger-Events mit pointer-events ab und nehmen Sie ihn aus der Tab-Reihenfolge.
• Opacity allein verbirgt Inhalte nicht vor Screenreadern. Dafür sind das hidden-Attribut, visibility oder display da.
• Jeder Wert unter 1 erzeugt einen neuen Stacking Context. Ein Overlay mit z-index in einer Karte, die auf 0.9 abblendet, kann dadurch in einer anderen Stapelreihenfolge landen als erwartet.

Soll nur der Hintergrund abdunkeln, empfiehlt MDN eine Hintergrundfarbe mit Alphakanal statt opacity auf dem ganzen Element. Liegt Text über dem Bild, muss der Kontrast zwischen Text und Hintergrund auch nach dem Fade reichen.

#Einblenden beim ersten Rendern mit @starting-style

Eine Transition startet nur, wenn sich ein Wert ändert. MDN erklärt, dass Transitions standardmäßig weder beim ersten Style-Update eines Elements ausgelöst werden noch dann, wenn display von none auf einen sichtbaren Wert wechselt. Eine Karte, die mit opacity: 1 ins DOM eingefügt wird, blendet deshalb nicht von selbst ein.

@starting-style definiert die Werte, von denen die Transition ausgeht. Für Elemente, die zu und von display: none wechseln, braucht es zusätzlich transition-behavior: allow-discrete, weil display einen diskreten Animationstyp hat. Beim Wechsel zu none springt der Wert erst bei 100 Prozent der Dauer um, das Element bleibt also während des ganzen Fades sichtbar.

.notice {
  opacity: 1;
  transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out, display 0.3s allow-discrete;
}

.notice.is-hidden {
  display: none;
  opacity: 0;
}

@starting-style {
  .notice {
    opacity: 0;
  }
}

Die erste transition-Zeile ist Absicht: MDN schreibt die Eigenschaft zweimal, damit Browser ohne Unterstützung für allow-discrete die Opacity weiterhin animieren. @starting-style hat dieselbe Spezifität wie die ursprüngliche Regel und muss deshalb danach stehen. MDN führt beide Funktionen als Baseline 2024. Ältere Browser zeigen das Element ohne Fade, was für einen rein optischen Übergang ein akzeptabler Fallback ist.

#Auf das Ende des Fades mit transitionend reagieren

Wenn JavaScript nur eine Klasse umschaltet und CSS den Fade übernimmt, kann das Skript auf transitionend hören, um zu erfahren, wann die Transition fertig ist, etwa bevor es hidden setzt oder den Fokus verschiebt. Die MDN-Seite zu transitionend und die Spezifikation nennen vier Regeln dafür, wann das Event tatsächlich ankommt:

• transitionend feuert in beide Richtungen: wenn das Element den Hover-Zustand erreicht und wenn es vollständig zurück ist.
• Wird die Transition vor dem Ende entfernt, etwa weil transition-property wegfällt oder display auf none gesetzt wird, kommt kein transitionend.
• Feuert transitioncancel, etwa weil der Zeiger mitten im Fade das Element verlässt, kommt für diese Transition kein transitionend.
• Sind Dauer und Verzögerung beide 0s, gibt es keine Transition, und keines der Transition-Events feuert.

Die letzte Regel verursacht in der Praxis die meisten Fehler. Setzt prefers-reduced-motion transition: none, wartet ein Skript, das in transitionend aufräumt, für immer. Filtern Sie nach propertyName und sehen Sie einen Weg vor, wenn keine Transition läuft.

const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;

// Im CSS: .is-fading-out { opacity: 0; }
function hideNotice(el) {
  el.classList.add('is-fading-out');
  if (reduce) {
    el.hidden = true;
    return;
  }
  el.addEventListener('transitionend', function onEnd(event) {
    if (event.propertyName !== 'opacity') return;
    el.removeEventListener('transitionend', onEnd);
    el.hidden = true;
  });
}

#Hover auf Touchscreens mit der Media Query hover

Das Media Feature hover aus Media Queries Level 4 prüft, ob das primäre Eingabegerät über Elementen schweben kann. Laut MDN liefert es none, wenn die primäre Eingabe gar nicht oder nicht bequem schweben kann, etwa bei Smartphones, die Hover mit langem Tippen nachahmen. Legen Sie die Hover-Regel in @media (hover: hover), wenn ein hängender Hover auf dem Smartphone stört, und lassen Sie :focus-visible außerhalb, damit Tastaturfokus weiterhin denselben Zustand erhält.

@media (hover: hover) {
  .card-media:hover {
    opacity: 0.75;
  }
}

.card-media:focus-visible {
  opacity: 0.75;
}

#Browserunterstützung für transition, focus-visible und prefers-reduced-motion

Die Tabelle zeigt die erste Version mit Unterstützung ohne Präfix, entnommen aus MDN browser-compat-data in Version 8.1.6 (Oktober 2026).

Internet Explorer unterstützt transition ab Version 10, aber keine der anderen Funktionen in der Tabelle. Safari kannte transition mit dem Präfix -webkit- bereits ab Version 3.1.

Eine Folge der Tabelle wird leicht übersehen. In einem Browser ohne :focus-visible, etwa Safari vor 15.4, wird die gesamte Regel .hover-image:hover, .hover-image:focus-visible verworfen, der Hover-Teil eingeschlossen. MDN erklärt im Artikel über Selektorlisten, dass ein einziger unbekannter Selektor die ganze Liste ungültig macht. Schreiben Sie Hover und Fokus als zwei getrennte Regeln, oder fassen Sie sie in :is() zusammen, das eine fehlertolerante Selektorliste annimmt.

#Hover-Fade-In und Fade-Out mit CSS3 testen

1. Properties auf opacity / transform begrenzen.
2. Dauer 200-300 ms setzen.
3. :focus-visible oder :focus-within ergänzen.
4. prefers-reduced-motion abfangen.
5. Stylesheet nur dort enqueuen, wo Galerien oder Karten existieren.
6. Auf einem realen Telefon tippen und prüfen, dass der erste Tap den Link trifft.
7. Kontrast im Hover-Zustand kurz gegenprüfen.
8. Galerie-Selektoren auf .wp-block-gallery begrenzen, nicht auf alle img.

#Zusammenfassung

CSS-Transitions sind der schlanke Weg zu Fade-Hover. Spezifische Properties, kurze Dauer, Focus-Zustände und Reduced Motion trennen brauchbare UI von Dekoration, die Nutzer stört. Hover-Effekte sind schnell gebaut, kosten aber Rendering-Zeit, sobald sie auf Position oder Größe statt auf transform und opacity laufen.

Wenn solche Details im Theme sauber und barrierearm sitzen sollen, übernehmen wir das in der frontendnahen WordPress-Entwicklung. Für ein kurzes Frontend-Review oder die Einbindung in ein Child-Theme schreiben Sie uns über das Kontaktformular.