1. Home
  2. Docs
  3. Divi Animation
  4. Extensions & Animati...
  5. Interactive Hover Motion with Tilt Effect

Interactive Hover Motion with Tilt Effect

Tilt Effect is an interactive hover-based extension that adds subtle 3D movement and depth to Divi 5 layouts. Instead of relying on static hover states, the extension creates responsive motion that reacts to visitor interaction and cursor movement, helping layouts feel more dynamic and engaging.

The effect is designed to remain lightweight and visually polished while adding a stronger sense of depth to cards, promotional sections, images, and interactive content areas. When used carefully, Tilt Effect helps create a more modern browsing experience without overwhelming the overall layout.

Unlike Text Flow or Image Flow, Tilt Effect is not limited to a single content module type. The extension can be applied across multiple Divi layout structures including sections, rows, columns, and supported native modules.

Common Website Use Cases
Tilt Effect works especially well for:

  • Feature cards
  • Team member sections
  • Promotional blocks
  • Product highlights
  • Interactive image layouts
  • Call-to-action areas
  • Service showcase sections
  • Modern landing page designs

Because the motion responds directly to user interaction, the effect works best on layouts where engagement and visual depth are important.

Supported Layout Areas and Modules
Tilt Effect can be applied across multiple native Divi layout elements, including:

  • Sections
  • Rows
  • Columns
  • Image Modules
  • Blurb Modules
  • Call To Action Modules
  • Button Modules
  • Other native Divi modules

Where to Find the Settings
To access the Tilt Effect controls:

  1. Open the layout element or module you want to animate.
  2. Navigate to the Design tab.
  3. Open the Tilt Effect settings group.

Once enabled, additional hover interaction controls become available directly inside the Visual Builder.

Understanding the Main Controls
Tilt Effect includes several controls for shaping hover interaction and motion intensity throughout the layout.

Some of the most commonly used settings include:

  • Tilt amount
  • Perspective
  • Hover scale
  • Animation speed
  • Direction controls
  • Reverse tilt
  • Reset on leave
  • Glow effects
  • Hover effect styles

These controls help create interactive hover behavior while maintaining visual balance across the page.

For best results, keep tilt strength moderate and use the effect selectively throughout the layout. Excessive hover movement across too many elements can quickly make the design feel distracting or visually unstable.

How can we help?