JSFiddle - React, Tailwind, and code Playground

by Sub Lines

HTML

<div id="images">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>

CSS

body {
  margin: 0;
  font-size: 0;
}

.image {
  background-size: cover;
  display: inline-block;
  width: 23%;
  padding-top: 23%;
  margin: 1%;
  transition: opacity 0.4s ease;
}

.image:nth-of-type(1) {
  background-image: url(https://placekitten.com/g/350/150);
}
.image:nth-of-type(2) {
  background-image: url(https://placekitten.com/g/300/550);
}
.image:nth-of-type(3) {
  background-image: url(https://placekitten.com/g/400/200);
}
.image:nth-of-type(4) {
  background-image: url(https://placekitten.com/g/350/750);
}

.show {
      opacity: 1;
}

.hide {
  opacity: 0;
}

JavaScript

var urls = [
		'url(https://placekitten.com/g/350/150)',
		'url(https://placekitten.com/g/300/550)',
		'url(https://placekitten.com/g/400/200)',
		'url(https://placekitten.com/g/350/750)',
		'url(https://placekitten.com/g/250/600)',
    'url(https://placekitten.com/g/400/150)',
    'url(https://placekitten.com/g/300/600)',
    'url(https://placekitten.com/g/450/350)'
	  ];
	  // Select the next image
	  var active = Math.floor(Math.random() * (urls.length - 4)) + 1

	  setInterval(function() {

		// Select randomnly the next div to change
		var rand = Math.floor(Math.random() * 4);
		
		// Store this list, so that we only make one call to the page
		let images = $('.image');
		
		let datachanged = images.attr("data-changed");
		
		while(rand == datachanged)
		rand = Math.floor(Math.random() * 4);
	  
		let current = $('.image:nth-child('+(rand+1)+')');
		
		current.toggleClass("show hide");
		
		// The fade effect takes 400ms
		setTimeout(function(){
		
		  current.css('background-image', urls[active]);
		  
		  images[0].setAttribute("data-changed", rand);
		
		  current.toggleClass("hide show");
		
		},400);
	  
		// Change active value so that the background will not be same next time
		active++;
		
		active = (active == urls.length) ? 0 : active ;
		
	  }, 2000);