Polish & Effects · Small finishing touches
Before / after slider前后对比滑块
- intuitive
- comparative
- hands-on
A vertical divider splits the before and after images, and dragging it shows the change as it happens.
When to use it
Use it to show optimisation, retouching, or option A versus B; if the two images are composed very differently, the comparison misleads.
Parameters
drag tracks 1:1 · clip-path inset in sync · no transition on release
Recipe
no transition on releaseBefore / after slider → drag tracks 1:1 · clip-path inset in sync
One sentence for your AI
Build a before/after comparison: stack both images with a 40px-wide divider starting at 50%, and clip the top image with clip-path as it is dragged, following 1:1 with no transition on release.