Image Compare

The Image Compare element allows users to visually compare two images using a draggable (or hover-based) handle. It’s ideal for demonstrating before/after effects, improvements, photo edits, and any visual transformation. The interactive slider helps users clearly understand changes and increases engagement on the page.

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

Content Tab

Images

The Images section includes two tabs Before and After with the following settings:

• Select Image: Choose the “before”/"after" image from the media library.
• Label Text: Add a label such as Before, After
• Label Position: Set the label location on the image.

Image Resolution: Choose from Full, Large, Medium, etc.

Settings

• Initial Position (%): Defines the default handle position when the comparison loads.
• Interaction Mode: Drag — user moves the handle manually; On Hover — handle moves based on mouse movement
• Orientation: Horizontal — left/right comparison; Vertical — top/bottom comparison

Style Tab

Images

CSS styling options for both images, such as filters, borders, spacing, and visual adjustments.

Handle

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

Labels

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