> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/sections/sections-available-in-inspiredtheme/image-comparison.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.