Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
July 16, 2024 /  Beginner

Before/After Image

How it works

Before/After Image will require two images to be loaded. Although the element will do the appropiate calculations automatically, it is recommended to have both images with the same dimensions to achieve an appropiate Before/After effect.
Show distance control will determine how much distance of before image to show initially.
Arrows, line and thumb can be styled at pleasure, as well as the images, that can receive filters using filters control and it’s object fit and position.

Animation controls

Thumb has a lite fade animation on hover than can be customized.
Opacity: determines the initial opacity that will be set to 1 on hover. The demo uses 0.95.
Duration

-Tamu

On this page