Image Compare

Image Compare is a powerful and flexible element for comparing two images simultaneously. Use the slider on the page to customize the image, which can hide one image and reveal the other image. You can also set horizontal and vertical orientation. It provides interactive functionalities and features with various customization options to make it more attractive.

Images and Labels

Image Compare: Image Settings
Image Compare: Image Settings

Original image

  • Label: Write the label of the image
  • Image: Select or upload an image via the media library.
  • Custom alt text: Write an alternative text for the image.

Modified image

  • Label: Write the label of the image
  • Image: Select or upload an image via the media library.
  • Custom alt text: Write an alternative text for the image.

General

Image Compare: General Settings
Image Compare: General Settings
  • Orientation: Set the comparison style from horizontal and vertical. By default, horizontal. selected
  • Slide trigger: Choose how to drag the slide. You have two options drag and hover.
  • Enable click: Enabling this option to trigger by mouse click.

Divider

  • Initial position: By decreasing the initial place, it will move toward the left side, and increasing it will move towards the right side.
  • Color: Choose the color of your choice for the divider.
  • Width: Adjust the width of the divider.

Handle

  • Icon: Choose the icon which will appear on the handle.
  • Icon size: Set the icon size.
  • Icon color: Choose the color of your choice.
  • Size:  Set the overall size of the handle.
  • Background color: Set the background color of handle.
  • Border: Sets the border and border radius on the handle.
  • Position: Set the position where you want to put it.

Label styles:

* Hiding overlay will disable the overlay settings. By default, it is enabled.

Overlay color: Choose the color to apply to the overlay.

Image Compare: Label Style Settings
Image Compare: Label Style Settings

Labels

  • Position: Set the position of the label of before and after images.

Original label

  • Color: Set the color of the label.
  • Background color: Set the background color of the label.
  • Border: Set the border and radius of the label.

Modified label

  • Color: Set the color of the label.
  • Background color: Set the background color of the label.
  • Border: Set the border and radius of the label.
Image Compare: Typography Style Settings
Image Compare: Typography Style Settings

Typography: Set the typography of both images like font size, color and family.

Padding and Margin: Set the paddings and margins of the label.

Click here to check out a demo page of Image Compare element.