JSFiddle - React, Tailwind, and code Playground

HTML

<a class="lien lien1" href="/"> LIEN </a>
<a class="lien lien2" href="/"> LIEN 2</a>

<div class="overlay-image">
  <img src="https://lemagduchat.ouest-france.fr/images/dossiers/2020-08/mini/education-chaton-071501-650-400.jpg" alt="Alt text" class="fond" />
  
  <img src="http://p8.storage.canalblog.com/88/62/784423/72724042.jpg" class="image image1" />
  
  <img src="https://www.rustica.fr/images/shutterstock-359131082-cebotarin.jpg" alt="Alt text hover" class="image image2" />
</div>

CSS

.overlay-image {
  position:relative;
}

  .overlay-image {
    height: 200px;
  }
  
  .fond {
   height: 100%;
  }
  .image {
   position: absolute;
   top: 0;
   left: 0;
   height: 200px;
   width: 325px;
   opacity: 0;
   transition: .5s ease;
  }
  
  .lien1:hover ~ .overlay-image .image1 {
   opacity: 1;
  }
  .lien2:hover ~ .overlay-image .image2 {
   opacity: 1;
  }