Super Image Comparison

Table of Contents

Add 2 images and set the size of the images

Handle Bar Type – Set the Horizontal or Vertical handle bar
Enable Overlay On Hover – Enable or disable Overlay when you mouse hover over on the images.
Overlay Color – Set the Overlay background color.
Overlay Before Text(On Hover) – Set the before text when mouse hover over on the images (e.g. Before).
Overlay After Text(On Hover) -Set the after text when mouse hover over on the images (e.g. After).
Handle Bar Position – Set the handle bar position in percentage.
Move Slider – If you set Move Slider On Hover, the handle bar will move with your mouse movement. By selecting Move With Handle Only, the slider can be moved with your mouse drag. And If you select Click To Move, the slider can be moved with mouse dragging and clicking anywhere.

Style #

Border Type – Here user can select the type of the border. The various option is available as like solid, dotted, dashed, groove etc..
Border Radius – User will input border radius here. It can be in px or %.
Box Shadow – Here you can add some shadow to the box.

Here, you can set the handler Width, Height, Background, Bar Color, Border Color, Icon Color, Border & Border Radius.

Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.
Background Type– From Here user can select the type of background whether it will be color, gradient or image.
Color – User will fix the border color here.
Margin – You can input the values for the headline margins in the required fields.
Padding – here you can set the preferable custom padding for the headline. Fill in the values for the top, bottom, right and left padding in pixels to apply your custom padding.
Box Shadow –
Border Type -Here user can select the type of border. The various option is available as like solid, dotted, dashed, groove etc..
Width – Here user will select the width of the border
Text Shadow – Here you can add some shadow to the text.
Box Shadow – Here you can add some shadow to the box
Use Same Color – User will select whether the same color is need for digits or not
Color – Here user will define the color of digits.

Updated on March 31, 2024