Image Compare

The Image Compare element allows users to present two visuals side by side with an interactive handle that reveals before and after states. It’s ideal for showcasing edits, transformations, product changes, or improvements. The sliding effect makes differences instantly clear and visually engaging.

See an example of this element in action: https://codex-themes.com/thegem/image-compare/

General Tab

Before Image

• Image Before: Select the “before” image from the media library.
• Label Before: Enter label text such as Before.
• Label Before Position: Choose where the label appears on the image.

After Image

• Image After: Select the “after” image from the media library.
• Label After: Enter label text such as After.
• Label After Position: Choose where the label appears on the image.

Common Settings

• Image Size / Resolution: Select display size (Full, Large, Medium, etc.)

Handle Settings

• Orientation: Choose horizontal or vertical orientation of the comparison handle.
• Interaction Mode: Select between Drag or On Hover behavior.
• Initial Position (%): Set the default position of the handle when the comparison loads.

Styles Tab

Handle Styles

Customization options for the handle’s design: color, thickness, arrow style, shadow, and size.

Labels Styles

Styling controls for the text labels, including typography styles, color, background, paddings and an option to show the labels on hover.