Can I stack two images in Webflow with just one click, if they have the same size?
TL;DR
- Place both images inside a Div Block with relative positioning, then set each image to absolute positioning at top-left (0,0) to stack them.
- To streamline reuse, convert the setup to a Symbol or apply a shared class via the Navigator for rapid stacking.
You can’t stack two images with just one click in Webflow, even if they are the same size. However, there’s a quick method using position styling that achieves this effect with minimal effort.
1. Use Absolute Positioning to Stack Images
- Drag a Div Block onto the canvas. This will act as the container.
- Set the Div’s position to Relative — this establishes a reference point for absolutely positioned children.
- Place both images inside the Div.
- Set each image’s position to Absolute and choose Top Left (0px from top and left). Since they are the same size, they’ll overlap precisely.
2. Optional: Create a Reusable Stack
- After setting up this structure, you can Convert the Div Block into a Symbol for reuse.
- Alternatively, use Combo Classes to apply the stacking style to any similar element setup.
3. Automate in the Navigator (semi-one-click)
- If you’ve already added both images to a div block:
- Select both images in the Navigator, then apply the same class that includes
position: absolute; top: 0; left: 0. - This lets you quickly stack them visually with minimal effort, if not in a literal single click.
Summary
Webflow does not offer a literal “one-click” stack feature, but by using absolute positioning inside a relative container, you can easily and precisely stack same-sized images visually. Keep it reusable by converting to symbols or using shared classes.
