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.

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

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. Default currently set to Slide.
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. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
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. Default currently set to 13. Reset to default.Using default value.
Label Accent Color		Controls 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 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. Default currently set to Image Centered.
Image Fade Transition Speed		Controls 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 Style		Controls the design of the handle used to change the before and after image. Default currently set to Circle With Arrows.
Handle Color		Controls 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 Color		Controls 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 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. Default currently set to 50. Reset to default.Using default value.
Handle Orientation		Controls the position of the before and after image handle. Default currently set to Horizontal.
Handle Movement Control		Controls 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 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. Default currently set to 0. Reset to default.Using default value.
Border Color		Controls the border color. Leave empty for default value of Strong Dark Gray. Reset to default.Using default value.
Border Radius		Controls the image border radius. In pixels (px), ex: 1px, or "round". Leave empty for default value of 0px.

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. Default currently set to Top Of Element Hits Bottom Of Viewport.

How To Use The Image Before & After Element
Element Options