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.
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.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
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.
Label Accent ColorControls the color of the label background and text. Text takes 100% of this color, background takes a % of it.
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.
Label Hover TypeChoose if labels should appear together on hover, or if only the label of the currently hovered image should appear.
Image Fade Transition SpeedControls the speed of the fade transition on mouse hover. In seconds.
Handle Design StyleControls the design of the handle used to change the before and after image.
Handle ColorControls the color of the before and after image handle line and arrows. ex: #ffffff.
Handle Background ColorControls the background color of the before and after image handle switch. ex: #000000.
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.
Handle OrientationControls the position of the before and after image handle.
Handle Movement ControlControls how the viewer interacts with the image handler. The image handle can use Drag & Click, Drag Only, or Hover.
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.
Border ColorControls the border color.
Border RadiusControls the image border radius. In pixels (px), ex: 1px, or "round".

In this article