Mini Insta-Friends Scrolling List Layout v2

index.html

<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>

mini-insta-friends-scrolling-list-layout-v2.markdown

Mini Insta-Friends Scrolling List Layout v2

A Pen by Cömert Çimen on CodePen.

License.

script.babel

document
  .querySelector('.horizontal-friends-list')
  .addEventListener('mousemove', ({target,clientX,clientY}) => {
    if (target.nodeName !== 'PICTURE' && target.nodeName !== 'IMG') 
      return

    const angle = 90 + getAngle(target, clientX, clientY)

    target
      .closest('picture')
      .attributeStyleMap.set('--angle', `${angle}deg`)
  })

const getAngle = (element, clientX, clientY) => {
  const { x, y, width, height } = element.getBoundingClientRect()
  
  const dx = clientX - (x + 0.5 * width)
  const dy = clientY - (y + 0.5 * height)
  
  return Math.atan2(dy, dx) * 180 / Math.PI
}

style.postcss

@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);
}

.horizontal-friends-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 10ch;
  gap: 2rem;
  
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: 2rem;

  border: 1px solid hsl(0 0% 80%);
  border-radius: 1ex;
  background-color: var(--surface2);
  padding: 2rem;

  & > figure {
    scroll-snap-align: start;
    
    display: grid;
    gap: 1ex;
    margin: 0;
    text-align: center;
    position: relative;
    cursor: pointer;
    user-select: none;

    &:hover > picture {
      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%;
      transition: transform .2s ease-in-out;

      background: 
        radial-gradient(hsl(0 0% 0% / 15%) 60%, transparent 0),
        radial-gradient(white 65%, transparent 0),
        conic-gradient(
          from var(--angle, .6turn),
          orange, 
          deeppink,
          orange
        );

      & > 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;
      line-height: 1.2;
      letter-spacing: -.5px;
    }
  }
}

styles

<link href="https://gitcdn.xyz/repo/octoshrimpy/blokkfont/master/blokkfont.css" rel="stylesheet" />