Blocks » Image Compare Block
Use the Image Compare block to place two images side by side (or above and below) and use a slider to reveal differences between the two images. Here’s an example:


Image Compare Block
To add an Image Compare block, click on the block inserter icon to open the block library and select the Image Compare block.
Detailed instructions on adding blocks can be found here.

The block works best with two images of the same width and height.
You can drag and drop images to the block for both the before and after locations. You can also click the Upload button, or select from already uploaded images from your Media Library:

You will be able to add a caption to the block after uploading your images.
If you upload the wrong images, or wish to change the order, you will need to delete the block and start over.
Block Settings
Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

Orientation Settings
Using the orientation settings, you can switch the orientation from side by side to above and below:

Advanced
The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block. Learn more.
