Divi-teman

Divi Bild HoverEffekter

Vändkort

Horisontellt vändkort

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

Läs mer

Vertikalt vändkort

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

Läs mer

Glida

Köp detta plugin

Divi Image Hover Effects — 15 animationer

Förvandla dina bilder till interaktiva upplevelser. Divi Image Hover Effects är eninbyggd Divi 5-modulsom lägger till häpnadsväckande svävningsanimationer och överläggsinnehåll till vilken bild som helst — direkt inuti Divi Visual Builder, ingen kodning krävs.

🃏 Vändkort — Inbyggt

Vänd horisontelltförvandla din bild till en sann3D vändkort: framsidan visar din bild, baksidan visar ditt överläggsinnehåll med en tillfredsställande perspektivvändning. Perfekt för teammedlemmar, portföljdelar, produktpresentationer eller alla situationer där du vill avslöja information med effekt.

🎬 15 handgjorda sväveffekter

  • Blekna— klassisk opacitetsavslöja med en subtil innehållsökning
  • Skjut upp / ner / vänster / höger— riktningsbelagda diabilder
  • Zooma in— bilden skalas upp när överlägget visas
  • Zooma ut— bilden börjar zoomas, dras tillbaka vid hovring
  • Vänd horisontellt— hel 3D-kortvändning med perspektiv
  • Fläck— Bilden mjuknar när ditt innehåll står i centrum
  • Grayscale — image desaturates on hover for a striking contrast
  • Shine — a light glare sweeps across the image
  • Studsa in — the overlay springs in from below with elastic energy
  • Reveal Left → Right & Right → Left — curtain-style clip-path reveal

✨ Rich overlay content

Build your overlay visually, exactly how you want it:

  • Overlay background — solid color or full gradient (start color, end color, direction)
  • Content 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

Justera allt direkt i Visual Builder utan att lämna din sida:

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

🎨 Full Divi design customization

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 (not compatible with Divi 4)
  • WordPress 6.0+
  • PHP 7.4+
Svenska