Can I stack two images in Webflow with just one click, if they have the same size?
TL;DR
- Wrap both images in a container set to Position: Relative, then set each image to Position: Absolute with top and left set to 0 to stack them precisely.
- Optionally, convert this setup into a reusable Symbol for use throughout your project.
You can't stack two images with a single click in Webflow, but you can easily stack them using positioning or flex settings with minimal setup.
1. Use Absolute Positioning to Stack Images
- Add both images to the same parent container (e.g., a Div Block).
- Set the parent container’s position to Relative.
- Set both images to Position: Absolute, then set top: 0 and left: 0 for both.
- The images will stack exactly on top of each other if they're the same size.
2. Use Grid or Flex (Not for Overlapping)
- Grid and Flexbox can arrange images side-by-side or vertically, but they don’t stack images on top of each other.
- If you're looking to overlap the images, use Absolute positioning instead.
3. Create a Reusable Stack Component
- You can create a Symbol from your stacked image setup once, then reuse it across your project.
- Right-click the parent container and choose Create Symbol.
Summary
You can't stack two same-size images with just one click in Webflow, but by wrapping them in a relative-positioned container and setting both images to absolute positioning, you can perfectly stack them with minimal effort.