Highlight differences between 2 images with the before-after widget
Before-After
Widget
Horizontal
Vertical
Labels
Click and hover
![Before-After 2 beforeAfter Creative](https://e-addons.com/wp-content/uploads/2020/07/beforeAfter_Creative-883x1024.png)
Before-After
From the Before-After panel choose 2 images to compare.
Define whether the orientation of the tool is horizontal or vertical.
The parameters available for interactivity are.
- Move slider on hover
- Move with handle only
- Move slider on click
Upon roll-over, custom labels will be displayed.
Before-After STYLE
Many graphic styles are available to customize the elements of the slider.
- Color
- Fill color
- Stroke width
- Circle stroke and width
- Triangle color, size and poosition
- Box shadow
The labels and the overlay can also be customized with:
- Color
- Size
- Typography
- Padding
![Before-After 3 beforeAfter style Creative](https://e-addons.com/wp-content/uploads/2020/07/beforeAfter_style_Creative-930x1024.png)
DEMO
Horizontal or Vertical
![Before-After 4 remy gieling meZSqVJeLAY unsplash scaled](https://e-addons.com/wp-content/uploads/2020/08/remy-gieling-meZSqVJeLAY-unsplash-scaled.jpg)
![Before-After 5 clarisse croset nFQ G2xWpvE unsplash scaled](https://e-addons.com/wp-content/uploads/2020/08/clarisse-croset-nFQ_G2xWpvE-unsplash-scaled.jpg)
![Before-After 4 remy gieling meZSqVJeLAY unsplash scaled](https://e-addons.com/wp-content/uploads/2020/08/remy-gieling-meZSqVJeLAY-unsplash-scaled.jpg)
![Before-After 5 clarisse croset nFQ G2xWpvE unsplash scaled](https://e-addons.com/wp-content/uploads/2020/08/clarisse-croset-nFQ_G2xWpvE-unsplash-scaled.jpg)
Labels and style
![Before-After 8 morning brew a1SH 85NThY unsplash scaled](https://e-addons.com/wp-content/uploads/2020/07/morning-brew-a1SH_85NThY-unsplash-scaled.jpg)
![Before-After 9 jade scarlato dT6wB15xdoA unsplash scaled](https://e-addons.com/wp-content/uploads/2020/07/jade-scarlato-dT6wB15xdoA-unsplash-scaled.jpg)