Einfacher Fade In / Fade Out beim Hover mit CSS3

In alten Zeiten (jQuery-Ära) nutzten wir .animate() oder .fadeIn() für Hover-Effekte. Im Jahr 2026 ist die Verwendung von JavaScript dafür ein Verbrechen an der Performance.

CSS3 transition ist hardwarebeschleunigt (von der GPU gehandhabt), weicher und erfordert null Skripte.

#Warum CSS Transitions JavaScript schlagen

Performance-Vorteile:

• GPU-Beschleunigung: CSS-Transitions laufen auf der Grafikkarte, nicht auf der CPU
• Keine JavaScript-Ausführung: Null Skript-Overhead, sofortige Reaktion
• Browser-Optimierung: Browser optimieren CSS-Animationen nativ
• Batteriefreundlich: Weniger CPU-Nutzung bedeutet längere Akkulaufzeit auf Mobilgeräten

#Grundlegender Fade-Effekt

Nehmen wir an, Sie haben ein Bild, das abdunkeln soll, wenn Sie mit der Maus darüberfahren.

/* Das Element */
.hover-image {
    opacity: 1;
    /* Der magische Teil */
    transition: opacity 0.3s ease-in-out;
}

/* Der Auslöser */
.hover-image:hover {
    opacity: 0.7;
}

Was passiert:

1. Bild startet bei opacity: 1 (voll sichtbar)
2. Beim Hover Übergang zu opacity: 0.7 (30% transparent)
3. Dauert 0,3 Sekunden mit weichem Easing
4. Kehrt zu opacity: 1 zurück, wenn Hover endet

#Verstehen der Transition-Eigenschaften

#transition-property

Gibt an, welche CSS-Eigenschaft animiert werden soll. Geben Sie immer spezifische Eigenschaften an statt all für bessere Performance.

/* Gut: Spezifische Eigenschaft */
transition: opacity 0.3s ease-in-out;

/* Besser: Mehrere spezifische Eigenschaften */

/* Vermeiden: Animiert ALLE Eigenschaften (Performance-Einbuße) */

#transition-duration

Wie lange die Animation dauert. Übliche Werte:

/* Sehr schnell (subtil) */

/* Standard (Sweet Spot für UI) */

#transition-timing-function

Kontrolliert die Beschleunigungskurve. Das macht Animationen “natürlich”.

/* Linear: Konstante Geschwindigkeit (robotisch) */

/* Ease: Langsamer Start, schnelle Mitte, langsames Ende (Standard) */

/* Ease-in-out: Langsamer Start und Ende, schnelle Mitte (sehr weich) */

#Vollständige Kurzschreibweise

Beispiele:

/* Einzelne Eigenschaft */

/* Mit Verzögerung */

#Fortgeschrittene Hover-Effekte

#1. Fade + Skalieren (Zoom-Effekt)

Kombinieren Sie Opacity und Transform für einen modernen Zoom-Effekt:

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

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

#2. Fade + Text überlagern

Perfekt für Bildergalerien:

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

.image-container:hover img {
    opacity: 0.7;
}

#Zusammenfassung

CSS-Transitions sind der moderne, performante Weg, um Hover-Effekte zu erstellen.

Wichtigste Erkenntnisse:

• Nutzen Sie spezifische Eigenschaften, nicht all
• 0,2-0,3s ist der Sweet Spot für UI-Interaktionen
• ease-out fühlt sich am natürlichsten an
• Nutzen Sie transform statt Position/Größe-Eigenschaften
• Testen Sie auf echten Geräten

Entdecken Sie unsere professionelle WordPress-Entwicklung um Ihr Projekt voranzubringen.