top of page

Creating an overlapping sticky gallery

Technical designer Anastasia Logacheva walks you through the steps to create a cool gallery pile up effect using sticky position.

What do you think about the course so far?

Thank you for your feedback!

How can we improve?

Thanks for submitting!

Explore more topics

Additional resources

Visit our help center

Ask the community

Hire an expert

Contact customer care

Anastasia Logacheva

Technical Designer

I’m a technical designer for Editor X. I studied industrial design at college and have completed courses in graphic, web and UX design. I’m a keen Scuba diver and mother to a golden retriever named Shirley.

Recreate this effect in the editor

Part 1

See full website→

1. Apply a 1x3 grid to your section (1 column x the number of rows you want to add images to)

2. Select Adjust Grid, then Edit Grid

3. Set each row height to 100vh

4. Drag in a container from the Add panel to each grid row

5. Stretch each container to fill the row

6. Select your first container again

7. Select the Design icon in the Inspector Panel

8. Select your background-color

9. Repeat this action for every container


Part 2

10. Drag in an image from the Add panel to the first container and make sure it’s attached

11. Select the image and open the Inspector panel

12. Dock the image to the centre

13. Drag in images to all other containers and dock to center

14. Select the container and open the Inspector panel

15. Go to Position in the Inspector panel

16. Beside Position Type, choose Sticky

17. Set all other containers to Sticky


Result: In preview, as you scroll, the pictures will overlap one on top of the other until they are all stacked.


Notes: Make sure that each of the containers are in the correct grid row and do not cross grid lines. You can also rotate the images slightly to give a cool, messy pile up effect.



EXPLORE MORE TUTORIALS

WEBINAR

The mid-year trends report:
How we built it

TUTORIAL

Video & decorative

TUTORIAL

Creating a sticky text scroll effect

bottom of page