---
title: "How to Add a Before and After Opacity Slider in WordPress?"
url: https://qa.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://qa.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

- Utilizes the Before After block from Nexter Blocks to create a before and after opacity slider in WordPress.
- Selects Opacity from the Mode section in the Content tab to enable the slider functionality.
- Adds images and labels for both before and after states in their respective tabs to showcase transformations.

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://qa.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://qa.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.