|
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--item-size: clamp(4rem, 1.2941rem + 9.4118vw, 6rem);
--overlap-offset: calc(var(--item-size) / 2);
--shadow-color: 0deg 0% 0%;
--bg-color: oklch(80% 0.15 calc((sibling-index()) * 30));
}
body {
min-block-size: 100dvh;
display: grid;
place-content: center;
background: hsl(203 12 70);
font-family: sans-serif;
}
.horizontal-stack {
cursor: pointer;
list-style: none;
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc(var(--item-size) - var(--overlap-offset));
place-content: center;
padding: 2em;
}
.item {
display: grid;
place-self: center;
inline-size: var(--item-size);
block-size: var(--item-size);
border-radius: 50%;
background: var(--bg-color);
position: relative;
box-shadow: -6px 0px 10px -3px hsl(var(--shadow-color) / 0.3);
transition: transform 500ms ease;
isolation: isolate;
}
.item::before {
display: grid;
font-size: 1.5em;
place-content: center;
place-self: center;
content: attr(data-index);
font-weight: 600;
color: #6d6d6d;
position: absolute;
width: calc(100% - 0.75rem);
height: calc(100% - 0.75rem);
border-radius: inherit;
background-color: #fff;
}
.item:hover {
transform: scale(1.25);
z-index: 10;
box-shadow: unset;
filter: saturate(140%);
}
.item:hover::before {
color: var(--bg-color);
}
|
