How to implement the effect of filling the background of the block from the middle when hovering over the link?

I am just starting my way in programming and would like to know how to implement the effect of a smooth background change when hovering over a link?

I managed to add the appearance of the text when hovering over the link, but I was unable to change the background color of the block when hovering over the link. Despite all my attempts, the background of the entire site changed when the mouse cursor hovered over the link. And I also found this example https://codepen.io/hudsontay/pen/ozQogO , but as I understand it, jQuery is used here. Is it possible to implement this in pure JavaScript and how to add a smooth color look from the middle?

An example of a website with this effect https://huyml.co/home.html.

Without hovering the mouse cursor

When hovering the mouse cursor + filling the background of the block from the middle

.info {
  max-width: 1920px;
  padding: 40px 0 0;
  margin: 0 auto;
}

.info__container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-decoration: none;
  list-style-type: none;
  font-size: 20px;
  color: #1c1c1c;
  margin: 0;
  padding-left: 0;
  height: 150px;
  width: 100%;
  background-color: lightgrey;
  position: relative;
  z-index: 100;
  overflow: hidden;
}

.info__text {
  width: 60px; 
  z-index: 1;
}

.info__text_hidden {
  font-size: 210px;
  font-family: "Roobert";
  letter-spacing: -10px;
  opacity: 0;
  visibility: hidden; 
  transition: 0.55s opacity, 0.55s visibility;
  position: absolute;
  color: #7a7a7a;
  bottom: -38px;
  left: 870px;
}

.info__text:hover~.info__text_hidden {
    opacity: 1;
    visibility: visible;
    color: #7a7a7a;
}

.info__text_decoration {
  font-family: "RoxboughCF-Regular";
  position: absolute;
  left: -185px;
  bottom: 2px;
}

.info__number {
  font-size: 22px;
  color: #7a7a7a;
}

.info__link {
  text-decoration: none;
  list-style-type: none;
  color: #1c1c1c; 
}

.info__link:hover {
  color: white; 
}

<main class="content">
    <section class="info">
      <ul class="info__container">
        <li  class="info__text"><span class="info__number">01</span><a class="info__link" href="#"> Works</a></li>
        <div class="info__text_hidden"><span class="info__text_decoration">W</span>orks</div> 
        <li class="info__text"><span class="info__number">02</span><a class="info__link" href="#"> About</a></li>
        <li class="info__text"><span class="info__number">03</span><a class="info__link" href="#"> Contact</a></li>
      </ul>
    </section>
</main>