JSFiddle - React, Tailwind, and code Playground

JavaScript

function swapImg(fade){
  var bgImg = document.getElementById("bgImg");
  var newBg = document.getElementById("newBg");
  
  /* ---------- */
  
  if(fade){
    var bgInterval = 0;
    window.bgInterval = setInterval("fadeIn()", 50);
  }else{
    bgImg.src = newBg.src;
    
    bgImg.style.width = newBg.style.width;
    bgImg.style.height = newBg.style.height;
    
    bgImg.style.top = newBg.style.top;
    bgImg.style.left = newBg.style.left;
    
    newBg.style.opacity = 0;
  }
}

function fadeIn(){
  var bgImg = document.getElementById("bgImg");
  var newBg = document.getElementById("newBg");
  
  var currentOpacity = parseFloat(newBg.style.opacity);
  
  if(currentOpacity < 1){
    currentOpacity += 0.1;
    newBg.style.opacity = currentOpacity;
  }else{
    clearInterval(bgInterval);
    
    bgImg.src = newBg.src;
    
    bgImg.style.width = newBg.style.width;
    bgImg.style.height = newBg.style.height;
    
    bgImg.style.top = newBg.style.top;
    bgImg.style.left = newBg.style.left;
    
    newBg.style.opacity = 0;
  }
}


// ---------------------------------------------------------------

  var img = new Image();
  img.onload = function(){
    newBg.src = imgPath;
    
    // ----------
    
    swapImg(fade);
  };
  
  img.src = imgPath;