"There are several techniques for placing images around a circle. I will start with my favorite one, which is less known but uses a simple code that relies on the CSS offset property. .container { display: grid; } .container img { grid-area: 1/1; offset: circle(180px) calc(100%*sibling-index()/sibling-count()) 0deg; } The code doesn't look super intuitive, but its logic is fairly straightforward. The offset property is a shorthand, so let's write it the longhand way to see how breaks down: offset-path: circle(180px); offset-distance: calc(100%*sibling-index()/sibling-count()); offset-rotate: 0deg;"
"We define a path to be a circle with a radius of 180px. All the images will "follow" that path, but will initially be on top of each other. We need to adjust their distance to change their position along the path (i.e., the circle). That's where offset-distance comes into play, which we combine with the sibling-index() and sibling-count() functions to create code that works with any number of elements instead of working w"
CSS offset-path and offset-distance place images along a circular path using circle(radius) and a computed offset-distance. Images stack via grid-area and then spread around the circle by calculating offset-distance as calc(100%*sibling-index()/sibling-count()). The offset shorthand expands to offset-path, offset-distance, and offset-rotate. Masked cutouts from a horizontal avatar list can be reused for the circular layout. The technique adapts to any number of elements and supports hover reveal effects. Browser compatibility currently favors Chromium-based browsers until sibling-index() and sibling-count() gain broader support.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]