---
title: Image Comparison
description: "The Image Comparison Block lets you compare two images using a draggable slider. You can display before-and-after images horizontally, vertically, or diagonally, customize the slider handle, and optionally display labels for each image. ## How to Add an Image Comparison…"
url: "https://shapekode.com/product/shapeblock/docs/image-comparison/"
updated: "2026-10-15"
category: Media Block
---

# Image Comparison

The Image Comparison Block lets you compare two images using a draggable slider. You can display before-and-after images horizontally, vertically, or diagonally, customize the slider handle, and optionally display labels for each image.

## How to Add an Image Comparison Block

Follow these steps to add the Image Comparison Block to your page or post.

### Step 1: Add the Image Comparison Block

1. Open the page or post where you want to add the Image Comparison Block.
2. Click the **+ (Add Block)** button.
3. Search for **Image Comparison** in the block search field.
4. Select the **Image Comparison** block from the ShapeBlock category.
5. The block will be added to your editor.
6. Select the block to access its customization options in the sidebar.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-60.png)

### Step 2: Configure the Image Comparison Block

The Image Comparison Block includes four tabs for customization:

- **Settings:** Select before-and-after images, set the initial comparison position, and configure labels.
- **Layout:** Choose the comparison direction, set the height, and adjust label positioning.
- **Style:** Customize the image container, slider handle, and labels.
- **Advanced:** Adjust spacing and background settings.

## Settings Tab

The Settings tab contains the following panels.

### 1. Images

- **Before Image:** Select the image to display as the before version.
- **After Image:** Select the image to display as the after version.
- **Default Offset (%):** Set the initial position of the comparison slider from 0% to 100%.

### 2. Labels

- **Show Before / After labels:** Enable or disable labels on the comparison images.
- **Before Label:** Customize the text displayed on the before image. Leave empty to hide this label.
- **After Label:** Customize the text displayed on the after image. Leave empty to hide this label.
- **Show labels only on hover:** Display the labels only when visitors hover over the comparison area.

The Before Label, After Label, and hover options appear when **Show Before / After labels** is enabled.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-61.png)

## Layout Tab

The Layout tab contains the following panels.

### 1. Size & Direction

- **Layout:** Choose the comparison direction:
  - Horizontal
  - Vertical
  - Diagonal
- **Height (px):** Set the height of the comparison area. The height can be adjusted separately for desktop, tablet, and mobile devices.

### 2. Label Position

This panel appears when labels are enabled and the layout is not diagonal.

- **Label Position:** Choose where the before and after labels appear.
  - For horizontal layout: Top, Middle, or Bottom.
  - For vertical layout: Left, Center, or Right.
- **Distance from the Edge (px):** Set the distance between the labels and the edge of the comparison area.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-62.png)

## Style Tab

The Style tab contains panels for customizing the comparison container, slider handle, and labels. The Labels panel appears only when labels are enabled.

### 1. Image Box

- **Border:** Customize the border of the comparison container.
- **Border Radius:** Adjust the corner radius of the container.
- **Box Shadow:** Add and customize a shadow around the container.

### 2. Handle

- **Style:** Choose the appearance of the comparison slider handle:
  - Circle (outline)
  - Circle (filled)
  - Rounded Square
  - Pill
  - Glass
  - Line Only
- **Icon:** Choose the icon displayed inside the handle:
  - Triangles
  - Chevrons
  - Double Arrow
  - None
  - This option is hidden when **Line Only** is selected.
- **Line & Border Color:** Set the color of the handle line and border.
- **Grip Color / Knob Fill:** Set the grip color for the line-only style or the knob fill for other handle styles. A background color or gradient can be selected.
- **Icon Color:** Customize the handle icon color. This option is hidden when **Line Only** is selected.
- **Grip Length (px) / Knob Size (px):** Adjust the grip length for the line-only style or the knob size for other styles.
- **Line Width (px):** Set the width of the comparison line.
- **Shadow:** Enable or disable the handle shadow.

### 3. Labels

This panel appears when **Show Before / After labels** is enabled.

- **Text Color:** Set the label text color.
- **Background:** Customize the label background color or gradient.
- **Typography:** Customize the label typography.
- **Padding:** Adjust the space inside the labels.
- **Border Radius:** Customize the label corners.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-63.png)

## Advanced Tab

The Advanced tab contains the following panels for additional customization.

### 1. Spacing

- **Padding:** Adjust the inner spacing around the block. Responsive settings are available for desktop, tablet, and mobile.
- **Margin:** Adjust the outer spacing around the block. Responsive settings are available for desktop, tablet, and mobile.

### 2. Background

- **Background:** Set a background color or gradient for the block.