Can I stack two images in Webflow with just one click, if they have the same size?
TL;DR
- Wrap both images in a div with position set to relative, and set each image to absolute with top and left at 0 to stack them directly.
- Use Flex (column) or Grid if you want images displayed one after another vertically, not truly stacked.
You cannot stack two images with a single click in Webflow, but you can easily stack them using quick layout techniques if they have the same size.
1. Use a Parent Div with Positioning
To stack images directly on top of each other:
- Add a div block and give it a class (e.g.,
image-wrapper). - Set the div block’s position to
relative. - Drop both images inside this div.
- Set both images to
position: absolute; top: 0; left: 0. - Make sure both images are the same size (width and height), or set fixed dimensions so they align perfectly.
2. Use Grid or Flex (Not for True Stacking)
If by "stacking" you mean displaying one image after another vertically:
- Use Flex vertical direction: Set the parent container to display: flex, direction: column, and just drop the images in.
- Or use Grid layout: Insert two rows and place each image in a row.
However, this does not stack images directly on top of each other—just one after the other.
Summary
Webflow doesn’t offer a literal “one click” to stack same-size images, but using a parent div with relative positioning and setting each image to absolute makes it fast and repeatable once styled.