Divi Image HoverEffekter






Vendekort


Skyv


Divi Image Hover Effects — 15 animasjoner
Gjør bildene dine til interaktive opplevelser. Divi Image Hover Effects er eninnfødt Divi 5-modulsom legger til fantastiske sveveanimasjoner og overleggsinnhold til ethvert bilde – direkte inne i Divi Visual Builder, ingen koding nødvendig.
🃏 Vendekort — innebygd
Vend horisontaltgjør bildet ditt til et sant3D flippkort: Forsiden viser bildet ditt, baksiden viser overleggsinnholdet ditt med en tilfredsstillende perspektivvending. Perfekt for teammedlemmer, porteføljedeler, produktutstillinger eller enhver situasjon der du ønsker å avsløre informasjon med effekt.
🎬 15 håndlagde sveveeffekter
- Falme— klassisk ugjennomsiktighetsavsløring med en subtil innholdsøkning
- Skyv opp / ned / venstre / høyre— retningsbestemte overleggsbilder
- Zoom inn— bildet skaleres opp etter hvert som overlegget vises
- Zoom ut— bildet begynner å zoomes, trekkes tilbake ved pekeren
- Vend horisontalt— full 3D-kortvending med perspektiv
- Uskarphet— Bildet mykner etter hvert som innholdet ditt er i sentrum
- Gråtoner — image desaturates on hover for a striking contrast
- Shine — a light glare sweeps across the image
- Sprett inn — 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
Juster alt direkte i Visual Builder uten å forlate siden din:
- Animation speed — any valid CSS duration (
0.3s,500ms…) - Animation easing — Ease, Ease In, Ease Out, Ease In Out, Linear
🎨 Full Divi-designtilpasning
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+

