Image Before & After Element

Last Update: March 12, 2024

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.

View Element Demo Page!

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, border 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

Heading		Description
Effect Type		Select 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 Image		Upload a before image to display.
Before Image Label		Add text that will be displayed as a label on the before image when hovered. If left empty, no label will show.
After Image		Upload an after image to display.
After Image Label		Add text that will be displayed as a label on the after image when hovered. If left empty, no label will show.
Link URL		Add the URL the item will link to, ex: http://example.com.
Link Target		Controls how the link will open.
Margin		Enter values including any valid CSS unit, ex: 4%.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Label Font Size		Controls the font size of the label text. In Pixels. Note: font family is controlled by body font in Global Options.
Label Accent Color		Controls the color of the label background and text. Text takes 100% of this color, background takes a % of it.
Label Placement		Choose 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 Type		Choose if labels should appear together on hover, or if only the label of the currently hovered image should appear.
Image Fade Transition Speed		Controls the speed of the fade transition on mouse hover. In seconds.
Handle Design Style		Controls the design of the handle used to change the before and after image.
Handle Color		Controls the color of the before and after image handle line and arrows. ex: #ffffff.
Handle Background Color		Controls the background color of the before and after image handle switch. ex: #000000.
Handle Offset		Controls where the handle will be positioned on page load allowing you to control how much of each image displays by default. In percentage.
Handle Orientation		Controls the position of the before and after image handle.
Handle Movement Control		Controls how the viewer interacts with the image handler. The image handle can use Drag & Click, Drag Only, or Hover.
Max Width		Set the maximum width the element should take up. Enter value including any valid CSS unit, ex: 200px. Leave empty to use full image width.
Alignment		Choose how to align the image.
Border Size		In pixels.
Border Color		Controls the border color.
Border Radius		Controls the image border radius. In pixels (px), ex: 1px, or "round".

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

How To Use The Image Before & After Element
Element Options