Divi-Bild-HoverEffekte

Karte umdrehen

Horizontale Flip-Karte

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt labore and dolore magna alua enim ad minim eimod

Erfahren Sie mehr

Vertikale Flip-Karte

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt labore and dolore magna alua enim ad minim eimod

Erfahren Sie mehr

Gleiten

Divi Image Hover-Effekte – 15 Animationen

Verwandeln Sie Ihre Bilder in interaktive Erlebnisse. Divi Image Hover Effects ist einnatives Divi 5-ModulDas fügt jedem Bild atemberaubende Hover-Animationen und Overlay-Inhalte hinzu – direkt im Divi Visual Builder, keine Programmierung erforderlich.


🃏 Flip Cards – Integriert

Horizontal spiegelnVerwandeln Sie Ihr Bild in ein wahres Bild3D-Flip-Karte: Die Vorderseite zeigt Ihr Bild, die Rückseite zeigt Ihren Overlay-Inhalt mit einem zufriedenstellenden Perspektivwechsel. Perfekt für Teammitglieder, Portfolioteile, Produktpräsentationen oder jede Situation, in der Sie wirkungsvolle Informationen preisgeben möchten.


🎬 15 handgefertigte Hover-Effekte

  • Verblassen– klassische Deckkraft-Enthüllung mit dezenter Inhaltsanhebung
  • Nach oben/unten/links/rechts schieben– gerichtete Overlay-Folien
  • Vergrößern– Das Bild wird vergrößert, wenn die Überlagerung angezeigt wird
  • Herauszoomen– Das Bild beginnt zu zoomen und wird beim Schweben zurückgezogen
  • Horizontal spiegeln— Vollständiger 3D-Kartenumschlag mit Perspektive
  • Verwischen– Das Bild wird weicher, wenn Ihr Inhalt im Mittelpunkt steht
  • Graustufen– Das Bild wird beim Schweben entsättigt, um einen auffälligen Kontrast zu erzielen
  • Glanz– ein leichter Glanz streicht über das Bild
  • Hüpf rein— Die Auflage federt mit elastischer Energie von unten ein
  • Links → Rechts anzeigen– Clip-Pfad-Laibung im Vorhangstil

✨ Umfangreicher Overlay-Inhalt

Erstellen Sie Ihr Overlay visuell, genau so, wie Sie es möchten:

  • Overlay-Hintergrund – einfarbig oder vollGradient(Startfarbe, Endfarbe, Richtung)
  • Inhaltliche Position –9 anchor points (top-left, center, bottom-right…)
  • Icon — pick any Divi icon, set its color and size
  • Title — choose the HTML tag (H1–H6 or P) and style it fully
  • Description — body text with complete typography control
  • Call-to-action button — URL, new tab support, and the full Divi button design panel (background, border, font, spacing, sizing, box shadow)

⚙️ Precision animation controls

Passen Sie alles direkt im Visual Builder an, ohne Ihre Seite zu verlassen:

  • Animation speed — any valid CSS duration (0.3s, 500ms…)
  • Animation easing — Ease, Ease In, Ease Out, Ease In Out, Linear

🎨 Vollständige Anpassung des Divi-Designs

Because Divi Image Hover Effects is a true native Divi 5 module, you get access to the complete Divi design system — the same tools you use on every other module:

  • Typography controls for title, description, and button
  • Backgrounds, gradients, and images on the module
  • Borders, box shadows, and border radius
  • Spacing (margin & padding) and sizing
  • Filters, transforms, and animations
  • Sticky positioning, scroll effects, and z-index
  • Responsive visibility and custom CSS per breakpoint

Everything you expect from a Divi module — right out of the box.


🔍 True Visual Builder preview

The overlay is always visible in the canvas so you can edit your content comfortably. Activate hover mode in the Design panel to preview your hover styles — colors, transitions, and flip animations — exactly as your visitors will see them.


♿ Performance & accessibility built in

  • Images use native lazy loading for fast page speeds
  • Animations automatically disable for users who prefer reduced motion (prefers-reduced-motion)
  • GPU-accelerated transitions for silky 60fps rendering

📋 Requirements

  • Divi 5 (nicht kompatibel mit Divi 4)
  • WordPress 6.0+
  • PHP 7.4+
Deutsch