JSFiddle - React, Tailwind, and code Playground

HTML

<!-- seul la classe 'lien' et le href sont necessaires ici -->
<a class="lien" href="http://lorempixel.com/1000/1000/cats/1">bg #1</a>
<a class="lien" href="http://lorempixel.com/1000/1000/cats/2">bg #2</a>
<a class="lien" href="http://lorempixel.com/1000/1000/cats/3">bg #3</a>

CSS

body, html { min-height: 100%; }

body { background-size: 100%; }

body:before {
   content: "";
   opacity: 0;
   position: absolute;
   top: 0; left: 0;
   height: 100%; width: 100%;
   background: #FFF;
   transition: opacity .5s;
   z-index: -1;
}
body.blank:before { opacity: 1; }

JavaScript

$(function(){      
    
    // Pré-chargement des images pour que ça soit fluide
    $('.lien').each(function(){ 
        var img = new Image();
        img.src = $(this).attr('href');
    });
    
    // Fonction qui s'execute au survol d'un lien
    $('.lien').mouseover(function(){
        var $this = $(this);
        
        $('body').addClass('blank');
        
        setTimeout(function(){
            $('body').css('background-image', 'url("'+$this.attr('href')+'")');
            $('body').removeClass('blank');          
        }, 500);
    });
    
});