JSFiddle - React, Tailwind, and code Playground

HTML

<div id="images">
<img src="https://dummyimage.com/100x100&text=coucou.jpg" class="item item-coucou">
<img src="https://dummyimage.com/100x100&text=hi.jpg" class="item item-hi">
<img src="https://dummyimage.com/100x100&text=salut.jpg" class="item item-salut">
<img src="https://dummyimage.com/100x100&text=adi.jpg" class="item item-adi">
</div>

<ul>
<li class="item item-coucou">Coucou !</li>
<li class="item item-hi">Hi !</li>
<li class="item item-salut">Salut <br>!</li>
<li class="item item-adi">Adi !</li>
</ul>

CSS

#images:hover + ul li.item.test {
  opacity: 1;
}
#images:hover + ul {
 max-height:50vh;
}

ul {
  margin:0;
  padding:0;
  display: grid;
  background:silver;
  list-style:none;
  max-height:0;
  transition: 0.25s;
}

li.item {
  opacity: 0;
  grid-row: 1;
  grid-column: 1;
  transition: 0.25s;
  margin:auto;
}
img:hover{box-shadow: 0 0 0 0.2em}
html{min-height:100%;display:grid;background:hotpink}
body{text-align:center;width:max-content;margin:auto;max-width:90%;padding:0.2em;background:yellow}

JavaScript

const li = document.querySelectorAll('li[class*="item-"]');

const addClassHover = (() => {
  document.querySelectorAll("img[class*=item-]").forEach((e) =>
    e.addEventListener("mouseenter", function (event) {
    let test = [this.classList];// arrayObject
    let str = test.map(a => `${ Object.values(a).join(" ")}`).join(" "); 
console.log(test); 
console.log(str);
      for (i = 0; i < li.length; i++) { 
        let liTest = [li[i].classList];
        let str2 = liTest.map(a => `${ Object.values(a).join(" ")}`).join(" ")
        if ( str == str2 ) {
console.log(liTest)
console.log(str2);
          li[i].classList.add('test');
        } else {
          li[i].classList.remove('test');  
        } 
        
      }
    })
  );
})();