Piotnet image comparison feature that visually compares a pair of images by customizing Horizontal or Vertical Orientation. You’ll be able to picture the motivational outcomes of your work.
Demonstration of Image Comparison
Detailed Tutorials to compare images
Step 1: Add Element
In the Bricks Panel, find the Piotnet Image Comparison, pick this element to Editor area
![how to set image comparison with piotnet bricks addons 1](https://piotnetbricks.com/wp-content/uploads/2023/01/set-image-comparison-1.png)
Step 2: Upload Images
Click on that element > Content Tab > Images > Upload both “Before Image” and “After Image”
![how to set image comparison with piotnet bricks addons 2](https://piotnetbricks.com/wp-content/uploads/2023/01/set-image-comparison-2.png)
Click on Options > customize the options:
- Offset Percent: displayed percent of the images when the page loads (%)
- Orientation: there are two types, Horizontal and Vertical
- Before Label: fill out the content Label of Before Image
- After Label: fill out the content Label of After Image
- Overlay
- Move with handle only
![how to set image comparison with piotnet bricks addons 3](https://piotnetbricks.com/wp-content/uploads/2023/01/set-image-comparison-3.png)
Step 3: Customize Styles
You can customize the Bricks Style Tabs for Layout, Typography, Background, Border/Box Shadow, Gradient/Overlay, Transform, CSS and Attributes.
![how to set image comparison with piotnet bricks addons 4](https://piotnetbricks.com/wp-content/uploads/2023/01/set-image-comparison-4.png)
Related Features
Recommendation:
To diversify query or apply filters, you can refer to Piotnet Grid. It possibly fulfills your advanced Grid Layout or combine Facets to filter Bricks Query Loop.