JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 100%; height:160px;"> 
<style type="text/css">
 
 #madiv{
position: absolute;
       margin-left: auto;
       margin-right: auto;
 width:260px;
 height:160px;
 visibility:hidden;
 }
  
 #madiv2{
position: absolute;
       margin-left: auto;
       margin-right: auto;
 width:260px;
 height:160px;
 visibility:visible;
 }

.boutonardoise a {
display:block;
width:109px;
line-height:35px;
text-align:center;
vertical-align:middle;
background:url(http://www.monsterup.com/upload/134094099551.png) no-repeat;
color:white;
text-decoration:none;
float:right;
margin:2px;
}
.bouton a:hover {
background:url(http://www.monsterup.com/upload/134094099551.png) no-repeat;
}

 </style>

<div id="madiv" align="center" onmouseout="document.getElementById('madiv2').style.visibility='visible'; document.getElementById('madiv').style.visibility='hidden'" >[...] Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, [...]

<div class="boutonardoise">
  <p>
   <a href="#">Commander</a>
 </p>
</div>
<div class="boutonardoise">
  <p>
   <a href="#">Comparer</a>
 </p>
</div>

</div>
 
<div id="madiv2">

<img onmouseover="document.getElementById('madiv').style.visibility='visible'; document.getElementById('madiv2').style.visibility='hidden'" src="http://siteprojet.com/Projets/RasoirClub/sites/all/themes/bluemasters/images/blade-2.png">

</div>
</div>