Image Before & After Element

Never before has it been easier to display the differences between two images. The Fusion-Builder 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.


Before & After Image Effects

We offer two types of effect for the Image Before & After. Slide, and Fade. Slide allows users to control what portion of each image they want to see, and Fade transitions the after image over the before image, at whatever speed you’d like.





Image Labels

Label your images, before and after, to be more descriptive for your users.


Handle Designs

Choose which handle design you’d like. We have several to choose from, each one will accent your website beautifully.

Handle Color Control

Set whatever color your heart desires for your Image Before & After Element slider handle.

Label Customization

The Image Before & After Element for Fusion-Builder gives you the power to set the styles of the labels you’re using. You can amend the color of the text as well as the size, and much more. See our samples below:


Label Placement

Do you want your labels inside, or outside of your image before and after element? Choose your settings here.


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

Would you like your slider to compare your images vertically or horizontally? We allow for both.


Handle Movement Control

Select the type of handle movement control you’d like. Choose from Drag and Click, Drag Only or Hover. Let your users explore your Before & After images in style and have full control over everything.




Animation Settings

These images have several CSS3 animations. This allows the image to animate when it comes into the viewport to helps catch the viewers eye. Check out each style below.

Mobile Visibility Settings

Our mobile visibility system gives you full control over what displays based on 3 customizable screen sizes. Every Fusion Builder Element has these settings and they allow you to show or hide elements on various screen sizes. In addition, you can choose what those screen sizes are! This gives you maximum control to set the exact point when an element should show or hide. Resize the page to see the elements appear or disappear based on what we set.

Only Show on Desktop

Only Show on Tablet

Only Show on Mobile

Complete Set of Options

Every option and description included with the Image Before & After Element is listed below.

  • effect_type – Choose from Fade or Slide

  • before_image – Select the Before image

  • before_image_label – Set the label for the Before image.

  • after_image – Select the After image

  • after_image_label – Set the label for the After image.

  • label_font_size – Set the font size for the labels.

  • label_accent_color – Set the accent color for the labels on your before and after images.

  • label_placement – This option lets you select where the labels appear on your before and after image element.

  • handle_design_style – Choose the style of your sliders handle.

  • handle_color – Set the colour for your sliders handle.

  • handle_background_color – Set the background colour for your sliders handle.

  • handle_offset – Select how far to offset your sliders handle.

  • handle_orientation – Vertical or Horizontal? Set your sliders handle orientation.

  • handle_movement_control – Controls how the viewer interacts with the image handler. The image handle can use Drag & Click, Drag Only, or Hover.

  • class – Add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.

  • id – Add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.

Join The 500,000+ Satisfied Avada Users!