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 {
    background-size: 100%;
    transition: background 0.5s linear;
}

JavaScript

$(function(){ 
    
    var firstTime = true;
    
    // Fonction qui permet de mettre une image blanche en fond
    var setBgBlank = function(){
        $('body').css( 'background-image', "url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)" );  
    };
    
    // Pré-chargement des images pour que ça soit fluide
    $('.lien').each(function(){
        var img = new Image();
        img.src = $(this).attr('href');
    });
    
    // On met un fond blanc au chargement de la page
    setBgBlank();       
    
    // Fonction qui s'execute au survol d'un lien
    $('.lien').mouseover(function(){
        var $this = $(this);
        
        setBgBlank();        
        
        setTimeout(function(){
            $('body').css('background-image', 'url("'+$this.attr('href')+'")');
        }, 700);
    });
    
});