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