30 Hover-Effekte
Größere Website-Cards mit Bild, Hintergrund, Overlay und Bewegung. Fahre mit der Maus über die einzelnen Cards. Die Klassen kannst du direkt für Hero-Bilder, Portfolio-Cards, Produktkarten oder Blog-Teaser verwenden.
10 gängige Hover-Effekte
Image Zoom
Das Bild zoomt sanft hinein. Sehr beliebt für Cards, Galerien und Blog-Teaser.
Card Lift
Die ganze Card hebt sich mit Schatten an und wirkt dadurch klickbar.
Dark Overlay
Das Bild wird dunkler, wodurch Text und Call-to-Actions stärker wirken.
Bright Image
Helligkeit und Sättigung steigen. Praktisch für dezente Bild-Hover.
Slide Text
Der Beschreibungstext erscheint erst beim Hover von unten.
Border Highlight
Ein leuchtender Rahmen zeigt dem User klar den aktiven Zustand.
Round Morph
Die Ecken werden stärker abgerundet. Einfach, weich und modern.
Background Blur
Das Bild verschwimmt im Hintergrund und der Inhalt wird fokussiert.
Image Rotate
Ein leichter Dreh-Effekt bringt mehr Dynamik in statische Bilder.
Color Filter
Ein Farbfilter verändert die Bildstimmung beim Hover.
10 kreative Hover-Effekte
Liquid Fill
Eine flüssige Farbwelle überdeckt das Bild und erzeugt einen auffälligen Reveal.
Split Overlay
Zwei farbige Flächen fahren von links und rechts über das Bild.
Glitch Image
Ein digitaler Stör-Effekt für Tech-, Gaming- oder Event-Websites.
Spotlight Reveal
Ein Lichtkreis legt sich über das Bild und erzeugt Fokus.
3D Tilt
Die Card kippt in den Raum. Sie wirkt dadurch fast wie ein Produkt-Tile.
Light Sweep
Ein heller Lichtstreifen wandert über das Bild wie bei einem Premium-Shine.
Color Bubbles
Farbige Kreise steigen ins Bild und verändern die visuelle Stimmung.
Diagonal Fill
Eine diagonale Farbfläche fährt ins Bild. Stark für Portfolio-Hover.
Ripple Pulse
Ein Kreis breitet sich von der Mitte aus und legt sich über die Card.
Poster Frame
Der Inhalt wird zu einem gerahmten Poster-Look mit Glas-Effekt.
10 stylische Hover-Effekte
Neon Glow
Leuchtender Rahmen und stärkerer Kontrast für moderne Landingpages.
Glass Content
Der Textbereich wird beim Hover zu einer transparenten Glasfläche.
Gradient Overlay
Ein animierter Verlauf legt sich über Bild und Hintergrund.
Minimal Line
Reduzierter Hover mit Textbewegung und feiner Linie.
Editorial Outline
Ein sauberer gelber Rahmen und reduziertes Bild für Editorial-Looks.
Soft Depth
Innenliegende Schatten geben der Card einen ruhigen, hochwertigen Effekt.
Premium Border
Ein farbiger Gradient-Rand macht die Card auffälliger und edler.
Editorial Zoom
Schwarzweiß, Kontrast und große Typografie wie bei Magazinen.
Magnetic Offset
Die Card verschiebt sich mit farbigem Schatten wie ein Layer.
Luxury Shine
Ein eleganter Shine läuft über das Bild. Sehr gut für Premium-Produkte.
Wie füge ich einen CSS-Hover-Effekt in Divi ein?
Du brauchst meistens nicht mehrere Module. Für eine eigene Card mit Bild, Text und Hover-Effekt reicht in der Regel ein einziges Divi Code-Modul.
Ein Modul reicht meistens
Wenn du den kompletten Aufbau selbst kontrollieren willst, verwendest du nur ein Code-Modul. Dort kommen HTML und CSS zusammen hinein: Bild, Überschrift, Text und der Hover-Effekt.
Welche Divi-Module?
Für Hover-Cards ist dieser Aufbau am einfachsten:
HTML + CSS + Effekt in einem Block
Nur nötig, wenn du Divi-Standardmodule einzeln gestalten willst
Schritt-für-Schritt in Divi
Neue Sektion erstellen
Öffne den Divi Builder und erstelle eine neue Sektion oder Zeile an der gewünschten Stelle.
Code-Modul einfügen
Wähle als Modul nicht Bild oder Text, sondern direkt das Modul Code.
HTML + CSS einfügen
Kopiere den kompletten Block mit <style> und HTML in das Code-Modul.
<div class="my-card">...</div>
Speichern und testen
Speichere die Seite und teste den Hover-Effekt am besten auf der veröffentlichten Seite.
Verwende für einzelne Demo-Cards oder Spezialeffekte ein einziges Code-Modul. So bleibt der Effekt zusammenhängend und du musst keine Divi-Module miteinander verbinden.
CSS sollte immer mit einer eigenen Klasse beginnen, z. B. .my-card oder .hover-effects-demo. So veränderst du nicht versehentlich die ganze Website.
Mini-Beispiel für ein Divi Code-Modul
So sieht der typische Aufbau aus, wenn du einen kopierten CSS-Effekt verwenden möchtest:
<style>
.my-card {
position: relative;
overflow: hidden;
min-height: 300px;
border-radius: 24px;
background-image: url("DEIN-BILD-LINK.jpg");
background-size: cover;
background-position: center;
transition: 0.45s ease;
}
.my-card:hover {
transform: translateY(-14px);
box-shadow: 0 34px 80px rgba(0,0,0,0.35);
}
.my-card-content {
position: absolute;
left: 24px;
right: 24px;
bottom: 24px;
color: white;
}
</style>
<div class="my-card">
<div class="my-card-content">
<h3>Meine Hover-Card</h3>
<p>Hier steht dein Text.</p>
</div>
</div>