JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ancre_3" class="article">
  <ul id="textasiat" class="niveau3 textasiat animClass">
    <li><a href="#">bolo</a></li>
    <li><a href="#">Ce lien sera</a></li>
    <li><a href="#">Ce lien sera</a></li>
    <li><a href="#">Ce lien sera</a></li>
  </ul>
  <img class="niveau4 imagasiat2" src="https://picsum.photos/200"> 
</div>

CSS

.imagasiat2{
	max-height: 100vh;
	float: right;
	top: 0 !important;
	bottom: 0 !important;
	max-width: 100%;
	position: relative;
	z-index: 9999;
	border: 1vw solid #000000;
	vertical-align: middle !important;
	padding-right: 5vw;
  opacity: 0;
	transition: all 1.5s ease-in-out;
}

.niveau3:hover + .niveau4 {
  opacity: 1;
}