Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Getting started
Jose Tamu
June 3, 2025 /  Beginner /  Light

Before/After Image v2

Before

After

How it works

Before/After Image v2 is an improved Before/After Image as it a nestable element. So you can drop any element inside the Before and After Containers (in Before/After Image element you could only change the before and after images’ source).
The element is also made up of the following parts you can style in their own sections in the element’s Content Tab:
Slider: the slider line that wraps the handlebar and the particles. There are two slider modes: Drag and Hover. The percentage control will determine the % of Before Container to show by default.
Handlebar: the tiny box with the dots in the middle of the Slider.
Glow: the glow behind the particles. It is made up of an outer mask and an inner mask.
Particles Container: contains all the particles.

Particles controls

Color: the particles’ color.
Animation Duration
Animation CSS easing: You can set any custom CSS easing of your own. Learn more about CSS easings here.

On this page