---
title: "How to Add Swiper Color Overlay Effects in Elementor?"
url: https://theplusaddons.com/docs/swiper-color-overlay-effects-in-elementor/
date: 2024-01-10
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "Overlay Special Effect reveals a widget with a two-colour wipe as it scrolls into view, rather than the widget just appearing. Despite this page's title, it is a general scroll-reveal..."
image: https://theplusaddons.com/wp-content/uploads/2024/01/How-to-Add-Swiper-Color-Overlay-Effects-in-Elementor_-1-1024x536.jpg
word_count: 313
---

# How to Add Swiper Color Overlay Effects in Elementor?

## 

- Overlay Special Effect is a Pro extension in The Plus Addons for Elementor Pro, and it is enabled from The Plus Addons > Extensions in the Plus Extras group, not under Widgets.
- Overlay Special Effect applies to any single widget, not just Swiper or carousel content, and it reveals the widget with a two-colour wipe as it scrolls into view.
- The effect uses two overlay colours, defaults to #313131 and #ff214f, and it triggers once when the widget crosses roughly 85% up the viewport.

Overlay Special Effect reveals a widget with a two-colour wipe as it scrolls into view, rather than the widget just appearing.

Despite this page's title, it is a general scroll-reveal available on any widget - confirmed on a plain image widget, not specifically on a Swiper carousel.

***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-extras/special-overlay-color/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — confirmed on The Plus Addons > Extensions screen (Plus Extras group, PRO badge).- **Extension to enable:** Overlay Special Effect, switched on under **The Plus Addons > Extensions** (Plus Extras group) — not under Widgets.

## Steps

- Enable **Overlay Special Effect** at **The Plus Addons > Extensions** (Plus Extras group), then save.- Select any widget in the Elementor editor and open its **Advance** tab.- Turn on **Overlay Special Effect**.- Set the two overlay colours (defaults `#313131` and `#ff214f`).- Publish the page and scroll the widget into view - it reveals once, the first time it crosses roughly 85% up the viewport.

![The widget carrying its unique reveal id class, confirmed to gain the animated class on scroll](https://theplusaddons.com/wp-content/uploads/2026/09/overlay-special-effect-result.webp)

## How It Behaves

Confirmed on a rendered fixture: scrolling the widget into view added an `animated` class exactly when the scroll-waypoint (85% of the viewport, trigger once) fired, and the two configured colours were written into a page-level `<style>` block targeting that widget's unique id class - both mechanisms work as the source predicts.

## Limitations

- This is not carousel/Swiper-specific, despite the old title - any single widget can carry it.- The reveal only fires once per page load (trigger-once); reloading the page is needed to see it again.

## Troubleshooting

### Nothing happens when I scroll past the widget

Confirm the extension is switched on at The Plus Addons > Extensions (Plus Extras group), not at Widgets, and that the widget is below the fold so the scroll waypoint has room to fire.

## Related Docs

- [Mouse Move Parallax](https://theplusaddons.com/docs/mouse-cursor-parallax-effects-in-elementor/)- [Tilt 3D Parallax](https://theplusaddons.com/docs/3d-tilt-parallax-effects-in-elementor/)- [Magic Scroll](https://theplusaddons.com/docs/magic-scroll-effect-in-elementor/)

## Frequently Asked Questions

**Q: Do I need the Pro version to use the overlay special effect in Elementor?**
A: The overlay special effect is part of The Plus Addons for Elementor Pro, so the Pro edition has to be installed and activated first. The page also says the extension is enabled from The Plus Addons > Extensions in the Plus Extras group, not from Widgets. That distinction matters because people often look in the wrong place and think the feature is missing when it is just disabled.

**Q: Can I use the color overlay reveal on a normal image widget, or is it only for Swiper sliders?**
A: It works on any widget, not just Swiper. The page explicitly says it was confirmed on a plain image widget and that the old title is misleading. That makes it a general scroll-reveal effect, so if you are trying to add a two-colour wipe to a single element, this extension fits that use case better than a slider-specific effect.

**Q: What happens when the overlay special effect is enabled on a widget?**
A: The widget reveals with a two-colour wipe as it scrolls into view instead of just appearing instantly. The page says the default overlay colours are #313131 and #ff214f, and the reveal fires once when the widget crosses roughly 85% up the viewport. That one-time trigger is useful if you want a clean entrance animation without repeated replay on every scroll.

**Q: Why does nothing happen when I scroll past the widget?**
A: The most common cause is that Overlay Special Effect is switched on in The Plus Addons > Extensions under Plus Extras, not under Widgets. The other gotcha is placement: the widget needs to sit below the fold so the scroll waypoint has room to fire. If it starts too high on the page, there may not be enough scroll distance for the trigger to run.

**Q: What are the limitations of this overlay effect?**
A: Two limits stand out: it is not carousel or Swiper-specific, and it only fires once per page load. If you want to see the animation again, you have to reload the page. That behavior comes from the trigger-once setup, so it works best for first-view reveal moments rather than effects you want replaying every time someone scrolls back.

**Q: Is there another way to create similar motion effects in Elementor?**
A: The related docs point to [Mouse Move Parallax](https://theplusaddons.com/docs/mouse-cursor-parallax-effects-in-elementor/), [Tilt 3D Parallax](https://theplusaddons.com/docs/3d-tilt-parallax-effects-in-elementor/), and [Magic Scroll](https://theplusaddons.com/docs/magic-scroll-effect-in-elementor/). Those are different effects, but they sit in the same family of motion-based interactions from The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH. If you want movement tied to cursor or tilt instead of scroll reveal, those are the closer matches.