JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="fade__box">
    
    <img class="fade__item" src="http://aca.local/cityspacebar/img/logo_fade_2.png" />
    <img class="fade__item" src="http://aca.local/cityspacebar/img/logo_fade_3.png" />
    <img class="fade__item" src="http://aca.local/cityspacebar/img/logo_fade_1.png" />
    
</div>

CSS

body { background: url('http://aca.local/cityspacebar/img/cityspace/bg_image.jpg'); }

.fade__box {
    position: absolute;
    display: block;
    width: 300px; height: 300px;
    overflow: hidden;
    border: 1px dotted #000;
}

.fade__item {
    position: absolute;
    top: 0px; left: 0px;
    display: block;
}

JavaScript

var $fader = $('.fade__box'),
    faderTime = 2000;

setInterval(function(){
   
    $fader.children().first().hide().appendTo($fader).fadeIn(faderTime-100);
     
}, faderTime);