🚨 This uses experimental CSS which isn't supported by your browser yet 🚨

CSS Carousel Spec - Photo Gallery

Entry for CodePenChallenge April #3, 2025 - Card Carousel

Iceland

A steel ship rusting away on a beach, with a mountain rising up behind it.
Garðar BA 64, shipwrecked in the Westfjords of Iceland. This steel ship dates back to 1912.
A curved waterfall split into three. The sky is grey with a thick cloud.
Goðafoss, A 12m curved waterfall in the North of the country.
The pride rainbow colours painted in a long strip along a street, with shops on either side.
Skólavörðustígur Rainbow Street, Reykjavík.

Hong Kong

A deep orange sun setting, with a hazy sky. There are a few boats in the water.
Looking out towards Lantau Island as the sun sets, from Cheung Chau Island.
A stone path with steps up ahead, passing through a forest.
Hiking through a trail at Pat Sin Leng Country Park 🥾
Bamboo poles being used to create a structure for an event.
Bamboo scaffolding being setup ahead of an event in Fanling Wai.
A variety of fishing trawlers mored up to wooden platforms,
Trawlers moored up in the fishing town of Tai O.

Sweden

Tree covered low-laying islands scattered in the water, viewed from a rocky and tree covered high vantage point.
View from the top of Skuleskogen National Park, along the coast of the Baltic Sea.

Portugal

Rocky cliffs around the ended, with the atlantic ocean off into the horizon. The sky is clear.
Looking out at the Atlantic Ocean from the cliffs near Cascais.
A lush and varied vegitation found within a roofed botanical garden. There is a stone path in the middle that leads of to different parts of the building.
Estufa Fria botanical garden in Lisbon.

Norway

A fully wooden Stave church and graveyard. The sky is mostly clear and blue, with a tree covered hill in the background.
Heddal Stave Church, The largest stave church in Norway which is constructed entirely out of wood.
Houses on stilts, against the edge of a river. The houses are wooden and of various colours.
Colourful houses along the Nidelva River in Trondheim.

About

Recently I was looking at the CSS Carousel Gallery site by Adam Argyle, and figured now would be as good a time as any to give this new CSS feature a spin.

I figured you can't go wrong with a photo gallery right? The primary thing I wanted to build out was a two-way carousel, a carousel-within-a-carousel... Per-country collections make up the horizontal-carousel, and a vertical-carousel for photos within that set. Say carousel one more time 🙃.

Another thing I got to experiment with was position-anchor and position-area, which allows us to link and position an element separate to it's parent container. This was very cool!

Any Problems?

I ran into a bit of a wall when it came to dropping the opacity for the next card.

I wanted the image to have around .2 opacity, while fully hiding the location title and description. I ended up in a rats nest of selectors trying to target it, to then only break the vertical-carousel in some way 😅.

I also ended up breaking the natural fall-back for browsers that don't support these features yet, well, kinda. The scrolling still works - but the text ends up in all the wrong places. With a bit of extra work I could probably improve the non-supporting browsers, but for now I'm just sticking up a warning banner.

While I think there are a lot of cool things to be achieved with CSS Carousels... This probably isn't one of them. While fun to do and to push the limits a bit, I wouldn't recommend implementing something like this for a photo gallery. Its overly clunky, and it's not a particularly good way to view the images either.

I'm happy I got to test it though.