Image Before & After Element

Last Update: February 14, 2023

Never before has it been easier to display the differences between two images. The Image Before & After Element allows you to beautifully highlight image differences with two transitions. Slide, and Fade. Each transition has its own customization options for even more flexibility. Read below for an overview of the Image Before & After Element, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Image Before & After Element

The Image Before & After Element is a new visual element to highlight the before and after state of something using two images. Just add the Element to your desired column.

Now you have the options window open. The first step is to choose your Effect type. View the More Examples link at the top of the page to see the various effects. Once you have chosen your effect type, you need to choose your Before and After images and their labels if desired. There are then a number of options to do with the label, border and borders size options, image fade transition speed, plus a whole list of options to control how the handle looks and is placed.

There is also an animation tab if you wish to influence how the element loads on the page.

Element Options

Note: The Default setting will use the global settings assigned for this element in your Options > Avada Builder Elements > Image Before & After section.

General

HeadingDescription
Effect TypeSelect which type of effect your before and after image uses. “Slide” provides a handle to move back and forth while “Fade” changes the image on mouse hover. Default currently set to Slide.
Before ImageUpload a before image to display.
Before Image LabelAdd text that will be displayed as a label on the before image when hovered. If left empty, no label will show.
After ImageUpload an after image to display.
After Image LabelAdd text that will be displayed as a label on the after image when hovered. If left empty, no label will show.
Link URLAdd the URL the item will link to, ex: http://example.com.
Link TargetControls how the link will open.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Label Font SizeControls the font size of the label text. In Pixels. Note: font family is controlled by body font in Global Options. Default currently set to 13. Reset to default.Using default value.
Label Accent ColorControls the color of the label background and text. Text takes 100% of this color, background takes a % of it. Leave empty for default value of White. Reset to default.Using default value.
Label PlacementChoose if labels are on top of the image and centered, on top of the image up & down or outside of the image up & down. Default currently set to Image Centered.
Image Fade Transition SpeedControls the speed of the fade transition on mouse hover. In seconds. Default currently set to 0.5. Reset to default.Using default value.
Handle Design StyleControls the design of the handle used to change the before and after image. Default currently set to Circle With Arrows.
Handle ColorControls the color of the before and after image handle line and arrows. ex: #ffffff. Leave empty for default value of White. Reset to default.Using default value.
Handle Background ColorControls the background color of the before and after image handle switch. ex: #000000. Leave empty for default value of White. Reset to default.Using default value.
Handle OffsetControls where the handle will be positioned on page load allowing you to control how much of each image displays by default. In percentage. Default currently set to 50. Reset to default.Using default value.
Handle OrientationControls the position of the before and after image handle. Default currently set to Horizontal.
Handle Movement ControlControls how the viewer interacts with the image handler. The image handle can use Drag & Click, Drag Only, or Hover. Default currently set to Drag & Click.
Max WidthSet the maximum width the element should take up. Enter value including any valid CSS unit, ex: 200px. Leave empty to use full image width.
AlignmentChoose how to align the image.
Border SizeIn pixels. Default currently set to 0. Reset to default.Using default value.
Border ColorControls the border color. Leave empty for default value of Strong Dark Gray. Reset to default.Using default value.
Border RadiusControls the image border radius. In pixels (px), ex: 1px, or "round". Leave empty for default value of 0px.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start. Default currently set to Top Of Element Hits Bottom Of Viewport.