Image Compare

Thunder Pack addon stack

Let your visitors do a before and after comparison using a set pre-selected of images with the Image Compare stack. Image Compare allows you to include labels as well as style the controls how you like.

  • Style the image compare controls to your liking.
  • Set the initial position of the divider line.
  • Allow comparison to be reset by visitor.

Example

Before Left Image
After Right Image

Using Image Compare

General

Remove Base Margin
This setting lets you disable the preset standard spacing that is applied to the bottom of the stack.

Images

Left & Right Images
Drop zones for both your before and after images. You are also given a field for each image to add an Alt Tag for your images.

Alignment
Allows you to align the Image Compare stack to the left, center or right.

Round Corners
Set how round you wish to have the Flip stack’s corners. You can set the corner roundness uniformly or choose to set each corner to its own individual border radius value.

Labels

Labels
Enabling this feature allows you to include labels in the top left and right corners. This can help you identify the images for your visitors. For example the default labels are set to "Before" and "After."

Divider Line Width
A slider that allows you to adjust the width of the line that separates your left and right images.

Style

Style Color Pickers
This section provides you with color pickers that allow you to customize the look of the stack. You’re given color pickers for adjusting the color of the arrows, arrow ring, arrow background, divider line, and the label text and background.

Advanced

Divide Start
Allows you to control where the divider line starts when the page loads. By default this is set to 50% which places the divider in the middle of the stack.

Reset Button
Enables a small button below the stack that will reset the divider’s position to your Divide Start setting when the visitor clicks it.