<div class="block block1">
  
<h1>Title1</h1>

<ul class="links">
<a href="#" data-src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_3_p7ekf9.png">link1</a>
<a href="#" data-src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_2_fygl3b.png">link2</a>
<a href="#" data-src="http://placehold.it/140x240/00c">link3</a>
</ul>

<img class="img" src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_1_ogatcw.png">

</div>

.block{
  position: relative;
  margin: 20px;
  padding: 10px;
  border: 1px solid;
  width: 400px;
}

a{
  display: block;
}

.img{
  position: absolute;
  top: 20px;
  right:0;
  width:150px;
  height: 150px;
}

$(document).ready(function() {
  $('a').hover(function() {  
    $(this).closest('.block').find('.img').animate({opacity:0}, 200,function() {
   $('.img').attr('src', this.dataset.img).animate({opacity:1}, 200);
 });   
});
});