SOURCE

document.querySelectorAll('.dock li').forEach(li => {
    li.addEventListener('click', e => {
        e.currentTarget.classList.add('loading')
    })

    li.addEventListener('mousemove', e => {
        let item = e.target
        let itemRect = item.getBoundingClientRect()
        let offset = Math.abs(e.clientX - itemRect.left) / itemRect.width

        let prev = item.previousElementSibling || null
        let next = item.nextElementSibling || null

        let scale = 0.6

        resetScale()

        if (prev) {
            prev.style.setProperty('--scale', 1 + scale * Math.abs(offset - 1))
        }

        item.style.setProperty('--scale', 1 + scale)

        if (next) {
            next.style.setProperty('--scale', 1 + scale * offset)
        }
    })
})

document.querySelector('.dock').addEventListener('mouseleave', e => {
    resetScale()
})

function resetScale() {
    document.querySelectorAll('.dock li').forEach(li => {
        li.style.setProperty('--scale', 1)
    })
}

<!-- Tutorial: https://youtu.be/ULMksUfcUsk -->

<div class="glass">
  <ul class="dock">
    <li>��</li>
    <li>��</li>
    <li>��</li>
    <li>��</li>
    <li>��</li>
    <li>��</li>
    <li>��</li>
  </ul>
</div>

html {
  font-size: 15px;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  align-items: flex-end;
  background-image: linear-gradient( 109.6deg,  rgba(25,170,209,1) 11.3%, rgba(21,65,249,1) 69.9% );
}

.glass {
  width: 100%;
  height: 8rem;
  background: rgba( 255, 255, 255, 0.25 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  display: flex;
  justify-content: center;
}

.dock {
  --scale: 1;
  
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dock li {
  font-size: calc(6rem * var(--scale));
  padding: 0 .5rem;
  cursor: default;
  
  position: relative;
  top: calc((6rem * var(--scale) - 6rem) / 2 * -1);
  transition: 15ms all ease-out;
}

.dock li.loading {
  animation: 1s loading ease-in infinite;
}

@keyframes loading {
  0%, 100% {
    transform: translateY(0px);
  }
  60% {
    transform: translateY(-40px);
  }
}