---
title: "How to Add a Before and After Opacity Slider in WordPress?"
url: https://nexterwp.com/docs/add-a-before-and-after-opacity-slider-in-wordpress/
date: 2024-12-05
modified: 2026-04-14
author: "Aditya Sharma"
description: "Are you looking to add a before and after opacity slider in WordPress? This comparison slider creates a smooth blending effect between images as you move your cursor, adding a..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Vertical-Before-and-After-Comparison-Slider-in-WordPress_-1-1024x519.jpg
word_count: 211
---

# How to Add a Before and After Opacity Slider in WordPress?

## Key Takeaways

- Nexter Blocks Before After block creates a before and after opacity slider in WordPress with a smooth blending effect between images.
- Opacity mode is selected in the Content tab, then the before image and after image are added in the Before Image tab and After Image tab.
- Before Label and After Label fields let the block add labels for the before image and after image in the comparison slider.

Are you looking to add a before and after opacity slider in WordPress? This comparison slider creates a smooth blending effect between images as you move your cursor, adding a visually engaging touch to your website and showcasing transformations in a unique way.

With the Before After block from Nexter Blocks, you can easily create a before and after opacity slider in WordPress.

*To check the complete feature overview documentation of the Nexter Blocks Before After block, [click here](https://nexterwp.com/docs/add-before-after-image-comparison-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-before-after-image-comparison-slider/)

To do this, add the Before After block to the page and follow the steps - 

1. In the **Content** tab, select **Opacity** from the **Mode **section.

2. Then in the **Before Image** tab, you have to add the before image in the **Select Before Image** section.

In the **Before Label** field, you can add a label for the before image.

3. After that in the **After Image** tab, you have to add the after image from the **Select After Image** section.

In the **After Label **field, you can add a label for the after image.

Now you will see an opacity before and after comparison slider.