JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li><div>item</div><img src="https://lorempixel.com/20/20/" alt=""></li>
  <li><div>item</div><img src="https://lorempixel.com/20/20/" alt=""></li>
  <li><div>item</div><img src="https://lorempixel.com/20/20/" alt=""></li>
  <li><div>item</div><img src="https://lorempixel.com/20/20/" alt=""></li>
  <li><div>item</div><img src="https://lorempixel.com/20/20/" alt=""></li>
</ul>

CSS

ul {
  list-style: none;
  display: flex;
}
li {
    padding: 10px;
}
li img {
  opacity: 0;
  transition: 0.3s ease;
}

li:hover img {
  opacity: 1;
}