---
title: "How to Add a Before and After Opacity Slider in Elementor?"
url: https://theplusaddons.com/docs/add-before-and-after-opacity-slider-in-elementor/
date: 2024-04-11
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "An opacity comparison has no divider. The two images sit on top of each other and one fades into the other as the visitor moves the pointer across, which suits..."
image: https://theplusaddons.com/wp-content/uploads/2024/04/How-to-Add-a-Before-and-After-Opacity-Slider-in-Elementor_-1024x536.jpg
word_count: 554
---

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

## 

- The Plus Addons for Elementor Before After widget uses Style set to Opacity to cross-fade two stacked images as the visitor moves the pointer across, with no divider line.
- The Plus Addons for Elementor Pro requirement is explicit, and nothing renders on the free plugin; the widget is enabled from The Plus Addons > Widgets by searching Before After and turning the toggle on.
- Opacity style starts fully visible on page load, keeps both images at full size, and requires matching image dimensions because Separator Line and Separator Position do not apply.

An opacity comparison has no divider. The two images sit on top of each other and one fades into the other as the visitor moves the pointer across, which suits subtle changes better than a hard line down the middle.

The **Before After** widget in The Plus Addons for Elementor calls this style **Opacity**.

***Requirement - This extension is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-before-after-slider/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** Pro. Nothing renders on the free plugin.- **Switch it on:** **The Plus Addons > Widgets**, search **Before After**, turn the toggle on.- **Two images of the same size.** They are stacked, so a size mismatch shows immediately.- For the divider-based styles, see [How to Add Before/After Image Comparison in Elementor?](https://theplusaddons.com/docs/add-before-after-image-comparison-in-elementor/)

## Steps

- Add the **Before After** widget to the page.- In **Content > Content**, set **Style** to **Opacity**.- Set **Image for Before** to the starting image, with a short **Label for Before** if you want one.- Set **Image for After** to the finished image, with a **Label for After**.

![The Style control in the Content section, with Horizontal, Vertical and Opacity.](https://theplusaddons.com/wp-content/uploads/2026/09/beforeafter-style.webp)

## What You Will See

Moving the pointer across the widget fades the before image out and the after image in. We measured the before image's opacity as the pointer crossed: 0.751 at a quarter of the way across, 0.420 at 58%, and 0.250 at three quarters. At rest it is fully opaque, so the page loads showing the before image.

![The Opacity style part-way through the cross-fade.](https://theplusaddons.com/wp-content/uploads/2026/09/beforeafter-result-opacity.webp)

![Animated demo of the Before After widget in opacity mode.](https://theplusaddons.com/wp-content/uploads/2024/04/before-after-opacity-new.gif)

## How It Behaves

- Nothing is clipped. Only the before image's opacity changes, so both images stay at full size the whole time.- **Separator Line** and all the separator settings are hidden for this style - there is no divider to draw. That is by design, not a fault.- Unlike the horizontal and vertical styles, the opacity style starts correctly on page load: the before image is fully visible before anyone touches it.- The labels behave the same as in the other styles.

## Which Style to Use

| Style | What the visitor does | Best for |
| ----- | --------------------- | -------- |
| **Horizontal** | Drags a handle left and right. | Side-by-side differences across the width of an image. |
| **Vertical** | Drags a handle up and down. | Changes that run top to bottom. |
| **Opacity** | Moves the pointer across; the images cross-fade. | Subtle differences - colour grading, retouching, a restyled interface. |

## Limitations

- Pro only.- There is no separator, so there is nothing visually telling the visitor the widget is interactive. Labels help.- The starting blend cannot be set - the before image always starts fully opaque. **Separator Position** does not apply to this style.- Both images need matching dimensions.- We tested with **Mouse Hover option** at its default (on), and did not test touch screens.

## Troubleshooting

### The Separator Line switch has disappeared

That is expected with **Style** set to **Opacity**. Switch back to **Horizontal** or **Vertical** if you want a visible divider.

### Nothing fades

Check that both **Image for Before** and **Image for After** are set, and that the two images are actually different. Then view the page on the front end - the effect does not run in the Elementor editor canvas.

### The two images do not line up while fading

Use images with the same dimensions.

## Not verified

So you know exactly what has and has not been checked:

- **Mouse Hover option** switched off.- **Full Width**, **Alignment**, **Image Resolution** and everything in **Label Options**.- Touch screens.

## Related Docs

- [How to Add Before/After Image Comparison in Elementor?](https://theplusaddons.com/docs/add-before-after-image-comparison-in-elementor/)- [How to Add a Vertical Before and After Comparison Slider in Elementor?](https://theplusaddons.com/docs/add-vertical-before-and-after-comparison-slider-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding a before and after opacity slider in Elementor?**
A: The key requirement is The Plus Addons for Elementor Pro, because the opacity style is part of the Pro edition and nothing renders on the free plugin. The page also calls out two same-size images, since the images are stacked and any size mismatch shows immediately. That matters more here than in divider-based styles because the fade effect exposes alignment problems right away.

**Q: How does the opacity style behave compared with a normal before and after slider?**
A: The opacity style cross-fades instead of using a divider. As the pointer moves across the widget, the before image fades out and the after image fades in, while both images stay at full size. The page notes that the before image is fully opaque at rest, so the page loads showing the before image first. That makes it better for subtle changes than a hard split.

**Q: Which kind of image change is best for the opacity style?**
A: Subtle differences are the best fit, especially colour grading, retouching, or a restyled interface. The page’s comparison table says horizontal works for side-by-side differences across width, vertical works for top-to-bottom changes, and opacity is for cross-fading on pointer movement. That makes opacity a better choice when you want the transition to feel softer than a visible divider.

**Q: Why did the separator line disappear in my before and after slider?**
A: That is expected when Style is set to Opacity. This mode has no divider at all, so Separator Line and all separator settings are hidden by design. If you want a visible divider again, switch back to Horizontal or Vertical. In other words, the missing line is not a bug in this style, it is part of how the effect works.

**Q: Why are my two images not fading or not lining up correctly?**
A: The usual causes are missing images or mismatched dimensions. The page says both Image for Before and Image for After must be set, and they need to be actually different images. It also says to use images with the same dimensions if they do not line up while fading. One more gotcha: the effect does not run in the Elementor editor canvas, so test it on the front end.

**Q: Does the opacity slider work on touch screens?**
A: The page does not verify touch screens, so that is an open edge case rather than a confirmed behavior. What it does confirm is that Mouse Hover was tested with its default setting on. If you are choosing this style for mobile-heavy traffic, that uncertainty matters because the interaction depends on pointer movement rather than a visible divider.