# Image comparison

***

The **Image comparison** section allows you to display a side-by-side comparison between two images (typically *Before* and *After*). This is especially useful for showcasing transformations, product results, or visual improvements.

### 1. Our guide to set up a Image comparison section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Image comparison.**
* Click **Save.**
  {% endhint %}

<figure><img src="/files/NAHFb1NxeSeCysSvnLkO" alt=""><figcaption></figcaption></figure>

### 2. **Section settings**

<figure><img src="/files/BYv3N1UbffacwHMGnGoX" alt=""><figcaption></figcaption></figure>

* **Heading:** Add a title to introduce the comparison (e.g., *See the difference*).
* **Heading size:** Adjust the prominence of the heading.
* **Button label & Button link:** Add a call-to-action button below or near the section.
* **Use outline button style:** Switch between solid and outline button styles.
* **Image settings:**
  * **Desktop image height:** Set the height of comparison images on desktop.
  * **Mobile image height:** Set the height on mobile devices.
  * **Adapt section height to first image size:** Automatically adjusts the entire section height based on the first image’s original ratio. This setting overrides manual height settings when enabled.
* **Corner radius:** Applies rounded corners to the section container and “Before” and “After” labels

### **3. Before block** settings

<figure><img src="/files/lnEQNcrxX4Nq2cDoiuad" alt=""><figcaption></figcaption></figure>

Represents the “before” state in the comparison.

* **Image / Mobile image:** Upload separate images for desktop and mobile.
* **Image overlay opacity:** Add a dark overlay to improve label visibility.
* **Label:** Add a label (e.g., *Before*).
* **Label position:** Position the label vertically on the left side.
* **Colors:** Customize label appearance for contrast and branding.
  * **Label background**
  * **Text color**

### **4. Before block** settings

Represents the “after” state.

* **Image / Mobile image:** Upload corresponding “after” visuals.
* **Image overlay opacity:** Adjust overlay for readability.
* **Label:** Add label (e.g., *After*).
* **Label position:** Position the label vertically on the right side.
* **Colors:** Customize label appearance for contrast and branding.
  * **Label background**
  * **Text color**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.inspiredtheme.com/articles/sections/sections-available-in-inspiredtheme/image-comparison.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.