<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.