JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dummyDiv"></div>
<div id="landing"><div id="cover" class="hide">
  
  test
</div></div>

CSS

#dummyDiv {
    position: inline;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
}
#landing {
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  margin-top: 0px;
  background-image:url('http://placekitten.com/200/300');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-color: black;
  transition: background-image .5s;
  z-index: -3;
}
#cover {
    background: white;
    opacity: .8;
    transition: opacity .7s;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
}
#cover.hide {
    opacity: 0;
}

JavaScript

var kittens = ["http://placekitten.com/200/300", "http://placekitten.com/400/301", "http://placekitten.com/200/305", "http://placekitten.com/200/308"]

var currentKitten = 1;
var lastKitten = 0;

var changeUpTheKitten = function() {
    lastKitten = currentKitten;
    currentKitten = (++currentKitten < kittens.length) ? currentKitten : 0;
    // we need to cache the image so it loads in smoothly as a bg on the real #landing div
    $("#dummyDiv").css("background-image", "url("+kittens[currentKitten]+")");
    $("#cover").removeClass("hide");
    $("#landing").css("background-image", "url("+kittens[lastKitten]+")");
    //  url("+kittens[lastKitten]+")"
    setTimeout(function() { $("#cover").addClass("hide"); }, 700);
};

var kittenChangeInterval = setInterval(changeUpTheKitten, 3000);

// sanity method

$("body").click(function(e) {
    if (kittenChangeInterval) {
        clearInterval(kittenChangeInterval);
        kittenChangeInterval = null;
    } else {
        kittenChangeInterval = setInterval(changeUpTheKitten, 3000);
    }
});