DMOE Image Reveal

The DMOE Image Reveal module displays multi-row content items with cursor-following image reveals and row hover motion effects. This documentation details all the configuration settings available under the Content, Design, and Advanced tabs of the module.

Add module on page

1. Open your page in the Visual Builder.
2. Click the green (+) Add Module icon inside a row.
3. Search for DMOE Image Reveal and insert it.

Content Tab

1. DMOE Image Reveal Item

Click on an individual item under the DMOE Image Reveal Item list to configure its content:

Content

• Title:
  • Control Type: Text Input Field
  • Description: Enter the main title heading for the reveal item (e.g., “Your Title Goes Here”).
• Reveal Image:
  • Control Type: Media Library Picker (+ Add Image)
  • Description: Upload or select the image that reveals on hover.
• Image ALT Text:
  • Control Type: Text Input Field
  • Description: Enter Alt text for search engines and accessibility.
• Show Subtitle:
  • Control Type: Toggle (ON / OFF)
  • Description: Enable or disable subtitle display.
• Subtitle Text:
  • Control Type: Text Input Field
  • Description: Enter subtitle text (e.g., “Short text here”). Visible when Show Subtitle is ON.
• Show Description:
  • Control Type: Toggle (ON / OFF)
  • Description: Enable or disable description text display.
• Description Text:
  • Control Type: Rich Text Editor (Visual & Text tabs)
  • Description: Add detailed body text for the item. Visible when Show Description is ON.
• Show Icon:
  • Control Type: Toggle (ON / OFF)
  • Description: Enable or disable an icon.
• Select Icon:
  • Control Type: Icon Grid Picker
  • Description: Select an icon from the library. Visible when Show Icon is ON.

Button setting

• Show Button:
  • Control Type: Toggle (ON / OFF)
  • Description: Enable or disable a Call-to-Action button on the item.
• Button Text:
  • Control Type: Text Input Field
  • Description: Enter button label text (e.g., “Read More”).
• Button URL:
  • Control Type: Text Input Field
  • Description: Enter destination link URL for the button.
• Button Link Target:
  • Control Type: Dropdown (In The Same Window, In A New Tab)
  • Description: Choose whether clicking the button opens the URL in the current window or a new tab.

2. Parent module settings (DMOE Image Reveal)

Under the Content tab of the main parent module, the following accordions are available:

Layout option

• Display Mode:
  • Control Type: Dropdown (Follow Cursor, Fixed Frame, Background Fill)
  • Description: Select how the reveal image is rendered relative to cursor movement or container frame.
• On Touch Screens:
  • Control Type: Dropdown (Reveal In Center, etc.)
  • Description: Define image reveal behavior on mobile and touchscreen devices.

Motion option

• Reveal Effect:
  • Control Type: Dropdown (Zoom & Settle, etc.)
  • Description: Select the image entry animation effect.
• Reveal Intensity:
  • Control Type: Range Slider (e.g., 50%)
  • Description: Adjust the intensity strength of the reveal animation.
• Motion Duration:
  • Control Type: Range Slider (e.g., 0.8)
  • Description: Set the animation speed in seconds.
• Reveal Speed Curve:
  • Control Type: Dropdown (Smooth, etc.)
  • Description: Select motion acceleration curve.
• Follow Lag:
  • Control Type: Range Slider (e.g., 0.4)
  • Description: Adjust cursor follow delay lag for fluid organic movement.
• Cursor Physics:
  • Control Type: Toggle (ON / OFF)
  • Description: Enable physics-based inertia and momentum on cursor movement.

Row motion option

• Other Rows:
  • Control Type: Dropdown (Fade Out, No Change, Lose Color, Blur)
  • Description: Define visual behavior of non-hovered rows when one row is active.
• Hovered Row:
  • Control Type: Dropdown (Slide Across, No Change, Background, Letters Ripple, Grow)
  • Description: Select hover animation style for the active row content.

Meta Accordion

• Admin Label:
  • Control Type: Text Input Field
  • Description: Enter a custom label to easily identify this module instance in the Divi Builder layout view.

Design Tab

Row Styling Accordion

• Row Layout:
  • Control Type: Dropdown (Side by Side, Stacked)
  • Description: Choose layout arrangement for item title, subtitle, and content elements.
• Row Alignment:
  • Control Type: Alignment Icons
  • Description: Align content inside each row.
• Divider Style, Color & Thickness:
  • Control Type: Dropdown, Color Picker & Range Slider
  • Description: Customize horizontal row separator line style (e.g., Solid, 15% black opacity, 1px thickness).

Reveal Image Styling Accordion

• Object Fit:
  • Control Type: Dropdown (Crop to Fit, Fit Inside, Original)
  • Description: Control image scaling behavior inside the reveal frame.
• Overlay Color:
  • Control Type: Color Picker / Opacity Slider (e.g., 55% black opacity)
  • Description: Add a custom tint color overlay over the reveal image.

Typography Accordions

Under Title Text, Subtitle Text, and Description Text accordions, customize font family, font weight, text size, color, line height, letter spacing, capitalization, font style, and line wrap style.

Advanced Tab

Configure custom CSS ID & Classes, element-level Custom CSS (Row, Reveal Image, Title, Subtitle, Description, Icon, Button), and responsive Visibility rules.