<section class="overflow-x">
<div class="horizontal-friends-list">
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/2.jpg">
</picture>
<figcaption>stolinksi</figcaption>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/3.jpg">
</picture>
<figcaption>henrihelvetica</figcaption>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/4.jpg">
</picture>
<figcaption>sierra.argyle.art</figcaption>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/5.jpg">
</picture>
<figcaption>szynszyliszys</figcaption>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/6.jpg">
</picture>
<figcaption>sarasoueidan</figcaption>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/7.jpg">
</picture>
<figcaption>kosamari</figcaption>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/8.jpg">
</picture>
<figcaption>wesbos</figcaption>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/9.jpg">
</picture>
<figcaption>paullewis</figcaption>
</figure>
</div>
</section>
@use postcss-preset-env {
stage: 0
}
:root {
--surface1: hsl(0 0% 90%);
--surface2: hsl(0 0% 100%);
--text1: hsl(0 0% 20%);
}
html {
block-size: 100%;
inline-size: 100%;
}
body {
min-block-size: 100%;
min-inline-size: 100%;
box-sizing: border-box;
margin: 0;
padding: 2rem;
display: grid;
place-content: center;
font-family: system-ui, sans-serif;
background-color: var(--surface1);
color: var(--text1);
}
.overflow-x {
overflow-x: auto;
overscroll-behavior-x: contain;
border: 1px solid hsl(0 0% 80%);
border-radius: 1ex;
background-color: var(--surface2);
padding: 2rem;
}
.horizontal-friends-list {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 10ch;
gap: 2rem;
& > figure {
display: grid;
gap: 1ex;
margin: 0;
text-align: center;
position: relative;
cursor: pointer;
user-select: none;
transition: transform .2s ease-in-out;
&:hover {
transform: scale(1.1);
}
&:last-child::after {
content: "";
position: absolute;
width: 2rem;
height: 100%;
right: -2rem;
inline-size: 2rem;
block-size: 100%;
inset-end: -2rem;
}
& > picture {
display: inline-block;
inline-size: 10ch;
block-size: 10ch;
border-radius: 50%;
background:
radial-gradient(hsl(0 0% 0% / 15%) 60%, transparent 0),
radial-gradient(white 65%, transparent 0),
linear-gradient(to top right, orange, deeppink);
& > img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
clip-path: circle(42%);
}
}
& > figcaption {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 500;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.