Skip to main content

Image Comparison

Use Image Comparison to let visitors compare two images with a draggable or interactive handler, such as before/after results, product transformations, edits, or service outcomes.

How It Works In Atomicat​

The drawer has separate Before Image and After Image tabs. Settings include handler type, move handler mode, default handler position, and optional hover overlay. Handler type can be vertical or horizontal. Move behavior can be handle-only, handler scroll, or handler click. Overlay mode can show Before and After text labels.

When To Use It​

  • Show before/after proof for beauty, fitness, cleaning, design, editing, or renovation offers.
  • Compare two product states, plans, screenshots, or visual outcomes.
  • Make transformation proof interactive without building custom code.
  • Add labels when the difference may not be obvious at first glance.

Configure The Element​

  • Upload the before image and after image at the same aspect ratio.
  • Choose vertical or horizontal handler based on the composition of the images.
  • Set default handler position so visitors see both states on load.
  • Choose whether movement should happen only on the handle, on scroll, or on click.
  • Enable overlay labels and edit Before/After text when clarity matters.

Testing Notes​

  • Preview on mobile and drag or tap the handler with touch input.
  • Check that both images crop consistently inside the container.
  • Confirm labels remain readable over the image content.

Limitations And Tips​

  • Different image dimensions can make the comparison look misaligned.
  • Do not use the effect for tiny differences that visitors cannot see.
  • Large before/after files can slow pages; compress images before upload.

FAQ​

Can I compare horizontal changes?

Yes. Handler type can be vertical or horizontal.

Can visitors click instead of drag?

The move handler options include handler click as well as handle-only and scroll behavior.

Why do my images not line up?

Use images with matching dimensions and focal points.