Fan Stack Avatars

<div class="nuda-av2-fan" tabindex="0" aria-label="Group with 3 members: Lee, Ada, Sam">
  <span class="nuda-av2-fan__item" style="background:#6366f1" aria-hidden="true">L</span>
  <span class="nuda-av2-fan__item" style="background:#ec4899" aria-hidden="true">A</span>
  <span class="nuda-av2-fan__item" style="background:#06b6d4" aria-hidden="true">S</span>
</div>

.nuda-av2-fan {
  position: relative;
  display: inline-block;
  width: 96px;
  height: 56px;
  outline-offset: 4px;
}

.nuda-av2-fan__item {
  position: absolute;
  left: 0;
  top: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #111;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  transform-origin: bottom center;
  will-change: transform;
}

.nuda-av2-fan__item:nth-child(1) {
  left: 0;
  z-index: 3;
}

.nuda-av2-fan__item:nth-child(2) {
  left: 14px;
  z-index: 2;
}

.nuda-av2-fan__item:nth-child(3) {
  left: 28px;
  z-index: 1;
}

.nuda-av2-fan:hover .nuda-av2-fan__item:nth-child(1),.nuda-av2-fan:focus-visible .nuda-av2-fan__item:nth-child(1) {
  transform: translate(-8px,4px) rotate(-14deg);
}

.nuda-av2-fan:hover .nuda-av2-fan__item:nth-child(2),.nuda-av2-fan:focus-visible .nuda-av2-fan__item:nth-child(2) {
  transform: translate(0,-6px) rotate(0deg);
}

.nuda-av2-fan:hover .nuda-av2-fan__item:nth-child(3),.nuda-av2-fan:focus-visible .nuda-av2-fan__item:nth-child(3) {
  transform: translate(8px,4px) rotate(14deg);
}

.nuda-av2-fan:focus-visible {
  outline: 2px solid #e4ff54;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-av2-fan__item {
    transition: none;
  }
}