> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bosscart.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Image Comparison

> This element lets visitors compare two images side by side using a draggable divider, perfect for showing transformations, renovations, product upgrades, or design revisions.

This element lets visitors compare two images side by side using a draggable divider, perfect for showing transformations, renovations, product upgrades, or design revisions.

<img src="https://mintcdn.com/alavon365/jdtI0XQKlmiI8Ux4/images/builder/0b61b68afcc004ab.png?fit=max&auto=format&n=jdtI0XQKlmiI8Ux4&q=85&s=35ab73f1f91e9152037f90e220a4acdd" alt="" width="1719" height="950" data-path="images/builder/0b61b68afcc004ab.png" />

#### **Why use it:**

* **Highlights transformation instantly:** dragging to reveal "before" and "after" is far more compelling than two separate static images.
* **Encourages interaction**: the drag-to-reveal effect invites visitors to engage rather than passively scroll past.
* **Versatile use cases:** home renovations, product redesigns, photo editing, fitness/progress results, or any side-by-side comparison.

### **Display Options:**

**Interactive (drag):** visitors manually drag the slider handle left/right to reveal more of each image at their own pace.

<img src="https://mintcdn.com/alavon365/a4e0aobXvzetCcVN/images/builder/ea2cbcab5eaebca4.png?fit=max&auto=format&n=a4e0aobXvzetCcVN&q=85&s=17d9b57b1aaf1d254751910db8590a9f" alt="" width="1654" height="811" data-path="images/builder/ea2cbcab5eaebca4.png" />

**Reveal on scroll:** the comparison animates automatically as the visitor scrolls past the section, no interaction required.

<img src="https://mintcdn.com/alavon365/FzeaQ9w7x4DDlcd4/images/builder/5fa958be3ef4e6a7.png?fit=max&auto=format&n=FzeaQ9w7x4DDlcd4&q=85&s=df73f03f6b8513408ea6a73772b03dd2" alt="" width="1467" height="812" data-path="images/builder/5fa958be3ef4e6a7.png" />

### **How to set it up:**

* Upload a **Left image** and **Right image**
* **Drag to set the focal point** on each image — this ensures the most important part of the photo stays visible/centered regardless of screen size or crop
* Customize **Left label / Right label** (e.g., "Before" / "After")

<img src="https://mintcdn.com/alavon365/zazDpBR889DAW7oG/images/builder/35790043fb3c6494.png?fit=max&auto=format&n=zazDpBR889DAW7oG&q=85&s=6a63161e3c329e08fc6918909f2bac9e" alt="" width="496" height="431" data-path="images/builder/35790043fb3c6494.png" />

<Note>
  **Reveal on Scroll settings**

  * **Reveal stops at:** set how far the reveal goes by default (e.g., starts at 50%)
  * **Reveal speed**: controls animation speed (used with Reveal on scroll mode)
</Note>