Реализация эффекта постепенного уменьшения, после выделенной области

const items = [...list.querySelectorAll('li')]

list.addEventListener('focusin', (event) => {
  items.forEach((item) => item.style.setProperty('--scale', '100%'));
  items.forEach((item, index) => {
    if (item === event.target) {
      item.style.setProperty('--scale', '200%');

      if (items[index + 1]) {
        items[index + 1].style.setProperty('--scale', '150%');
      }

      if (items[index - 1]) {
        items[index - 1].style.setProperty('--scale', '150%');
      }
    }
  });
});

list.addEventListener('focusout', (event) => {
  items.forEach((item, index) => {
    item.style.setProperty('--scale', '100%');
  });
});

list.addEventListener('mouseover', (event) => event.target.focus());

ul {
  width: 200px;
}

li {
  margin: 1rem;
  transform-origin: 0 50%;
  transform: scale(var(--scale));
  transition: 0.2s;
}

<ul id="list">
  <li tabindex="0">Lorem 1</li>
  <li tabindex="0">Lorem 2</li>
  <li tabindex="0">Lorem 3</li>
  <li tabindex="0">Lorem 4</li>
  <li tabindex="0">Lorem 5</li>
  <li tabindex="0">Lorem 6</li>
  <li tabindex="0">Lorem 7</li>
  <li tabindex="0">Lorem 8</li>
</ul>