Je suis un peu débutant mais je ferais cela en javascript.
 
Code :
 - <script type="text/javascript">
 - function recette_over(nom) {
 - document.getelementbyid("desc_recette" ).src="image_recette.jpg";
 - document.getelementbyid("nom_recette" ).innerHTML= nom;
 - }
 - </script>
 - <div id="nom_recette">Recette</div> //Le titre de la recette, initialisé ici à une valeur de base
 - <img src="imagedebase.png" id="desc_recette" alt=""> //ton image de base à gauche, celle qui existe sans que tu pointes qqchose avec ta souris
 - <img src="image.png" id="recette1" alt="mon image" onmouseover=''recette_over(pates au khäkhä)"> // ton image de choix à droite
 
  | 
 
Bon c'est surement pas très propre, mais ça a le mérite d'être simple à comprendre.
J'ai pas testé, mais le principe est là...
 
EDIT: il y a surement moyen de faire plus propre en CSS
 
 ---------------
			
HFR Links Preview | HFR Giphy