Image comparison

A before and after slider: two images stacked, with a handle that reveals one over the other. Use it for renovations, retouching, product finishes, or any change you want visitors to see side by side.

See it live

Live demo on fancybricks.co: drag the handle, or switch the behavior between Drag, Follow the mouse and Follow and return to center.

Add it

1. In Bricks › Fancy Bricks, turn on Image Comparison.
2. In the builder, open the elements panel and add Fancy Image Comparison (category fancy-bricks). It isn't nestable.
3. Pick Image 1 and Image 2.

Settings

The real Bricks panel, set like the demo. From left to right: the two images, Follow Mouse / Ring animation / Return center, and the handle with Aspect Ratio Type.

All the settings are in the Content tab.

Images and behavior

Control	What it does	Default
Image 1	The first image. Accepts dynamic data.	—
Image 2	The second image, revealed by the handle. Accepts dynamic data.	—
Follow Mouse	On, the handle follows the mouse. Off, visitors drag it.	On
Return center	Sends the handle back to the center when the mouse leaves.	On
Ring animation	An animated ring around the handle.	On
Ring color	The ring's color. Shows when Ring animation is on.	—

Size

Control	What it does	Default
Aspect Ratio Type	16:9 (Widescreen), 4:3 (Standard), 1:1 (Square), 21:9 (Ultrawide), 9:16 (Vertical) or Custom.	16:9
Custom Aspect Ratio	With Custom, type the ratio as width / height, for example 4 / 3.	—

Handle

Control	What it does	Default
Icon	The icon inside the handle.	A split arrow
Icon size	Icon size. Only for font icons, not SVG.	16px
Icon color	Icon color. Only for font icons, not SVG.	—
Divider Color	The color of the line between the two images.	—
Circle Background	The handle's background.	—
Circle Background on Focus	The handle's background when it has keyboard focus.	—
Circle border	The handle's border.	—
Circle size	The handle's size.	35px

Tips

• Query loops and product pages. Set both images from dynamic data and the slider repeats per post: one slider per project in a portfolio loop, or the product with and without its finish on a product page. For example, with two ACF image fields named before_photo and after_photo, use these tags in Image 1 and Image 2:

  {acf_before_photo}
  {acf_after_photo}

• Keyboard. The handle is a range control, so it can be focused and moved with the arrow keys.