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 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://via.placeholder.com/150/2b00ff);
}
.image:nth-of-type(2) {
  background-image: url(https://via.placeholder.com/150/bf00ff);
}
.image:nth-of-type(3) {
  background-image: url(https://via.placeholder.com/150/ff0090);
}
.image:nth-of-type(4) {
  background-image: url(https://via.placeholder.com/150/ff0000);
}
.image:nth-of-type(5) {
  background-image: url(https://via.placeholder.com/150/ff9500);
}
.image:nth-of-type(6) {
  background-image: url(https://via.placeholder.com/150/fffb00);
}
.image:nth-of-type(7) {
  background-image: url(https://via.placeholder.com/150/51ff00);
}
.image:nth-of-type(8) {
  background-image: url(https://via.placeholder.com/150/00ffbb);
}

.show {
      opacity: 1;
}

.hide {
  opacity: 0;
}

JavaScript

var urls = [
    	'url(https://via.placeholder.com/150/2b00ff)', //initial 1
    	'url(https://via.placeholder.com/150/bf00ff)', //initial 2
    	'url(https://via.placeholder.com/150/ff0090)', //initial 3
      'url(https://via.placeholder.com/150/ff0000)', //initial 4
      'url(https://via.placeholder.com/150/ff9500)', //initial 5
      'url(https://via.placeholder.com/150/fffb00)', //initial 6
      'url(https://via.placeholder.com/150/51ff00)', //initial 7
      'url(https://via.placeholder.com/150/00ffbb)', //initial 8
      'url(https://via.placeholder.com/150/00e5ff)',
      'url(https://via.placeholder.com/150/0084ff)',
      'url(https://via.placeholder.com/150/8800ff)'
	  ];
	  // Select the next image
    var selectedImages = [1,2,3,4,5,6,7,8] // initial state of divs img urls
        var lastSelectedDiv = -1; // initial state of last selected div

    	  setInterval(function() {
    	  var active; 
        do{
          active = Math.floor(Math.random() * (urls.length - 2)) + 1
        } while(selectedImages.indexOf(active) != -1) // get a unique image (not in current ones that are displayed)
    		// Select randomnly the next div to change which is diffrent than the lastSelectedDiv
        var rand;
        do{
    		  rand = Math.floor(Math.random() * 4); // get a random value until its not the same as lastSelectedDiv
        } while(rand == lastSelectedDiv)
        selectedImages[rand] = active;

        lastSelectedDiv = rand; // override lastSelectedDiv to new random value so that next time it must be different
    		let current = $('.image:nth-child('+(rand+1)+')');
    		
    		current.toggleClass("show hide");
    		
    		// The fade effect takes 400ms
    		
    		setTimeout(function(){
    		
    		  current.css('background-image', urls[active]);
      
    		
    		  current.toggleClass("hide show");
    		
    		},400);

    		
    	  }, 2000);