e-addons

Share

ic Creative bwe-Creative

Before-After

The Before-After widget allows you to compare 2 images on a display interface that reacts to drag or click.

As the name suggests, it is the best solution to show before and after situations: furniture, photo retouching, restoration, surgery, and much more.

Vertical or horizontal scrolling effects make the UX of this fantastic e-addons widget even more enjoyable.

Before-After widget
Highlight differences between 2 images with the before-after widget

Before-After

Widget

Horizontal

Vertical

Labels

Click and hover

beforeAfter Creative

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
beforeAfter style Creative

DEMO

Horizontal or Vertical

remy gieling meZSqVJeLAY unsplash scaledclarisse croset nFQ G2xWpvE unsplash scaled
remy gieling meZSqVJeLAY unsplash scaledclarisse croset nFQ G2xWpvE unsplash scaled

Labels and style

morning brew a1SH 85NThY unsplash scaledjade scarlato dT6wB15xdoA unsplash scaled