Stacks
I wanted a way to combine individual images into a collage with simple HTML and CSS.
I was working on a project that required a more interesting visual treatment for screenshots than a typical grid or flexbox layout. I had an idea of how I wanted them arranged, but I didn’t want to compose the collage and export an image of the fixed layout; on small screens, it would be too difficult to discern the image details. Ideally, they would switch to a longer single-column layout and be easier to view in that context.
The basic idea
I sketched out a framework and prompted Claude to build a simple tool to visualize the layout and use slider controls and inputs to adjust the overlap and offset properties. Once I was satisfied with it, I quickly produced the image stacks I needed. I thought other people might find it useful too, but I had a few more revisions in mind.
Image rotation was an easy addition, but I also wanted a way to vary the size of the images in a row. Inspired by Photoshop’s level sliders, a multi-handle range control offered a compact way to adjust the edges of the row and the seams between images. And a slider handle underneath it allowed for horizontal shifting of the row.
Try it out
Hop on over and have a look. I find it intuitive and genuinely helpful (but I’m obviously biased). I’d love your honest feedback! Will this help you? Does it make sense? Or is this so niche, that I’m the only one that finds it useful? I didn’t do much research to see what other tools might offer the same functionality because I was really only building this for me. It’s purposefully light on documentation so there might be some barriers to entry, but I think the utility is obvious once you take it for a spin.
