EverWeb Codebox logo

EverWeb Widgetbox 3

Touch Before/After

Touch Before After Widget

Horizontal or Vertical Slider Bar

Two images are stacked one on top of the other and can be compared by dragging/swipping the sliding bar. This bar can be orientated horizontally or vertically and can be offset by a variable amount on page load.
When used on the full version of the website, the image can have an overlay on hover with optional before/after labels. The overlay color and its opacity are adjustable.

Touch Before After Widget

Horizontal with Overlay & Labels

Before ImageAfter Image

Vertical - No Overlay or Labels

Before ImageAfter Image

Widget Settings

Make sure the images have the same size and aspect ratio before importing into EverWeb.
Choose the images and add alt text for SEO.
Check the box to display the Before/After labels and set their font, size and color.
Set the sliding bar orientation - horizontal or vertical - and enter the amount of offset required on page load. The offset can be between zero and 999.
If the overlay on hover is required, choose the color and drag the slider to the right to set its opacity value.

Touch Widgets Bulk Pack Discount Deal

Buy all 4 Touch Widget packs for $30.00 …

This widget is included in the Touch Image widget pack.