JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="fade__box">
    
    <img class="fade__img" src="http://jf.local/logo-cityspace-0.png" alt="" />
    
</div>

CSS

.fade__box {
    position: relative;
    display: block;
    width: 300px; height: 300px;
    overflow: hidden;
    border: 1px dotted #000;
    background: url("http://jf.local/logo-cityspace-1.png") no-repeat 0px 0px;
}

.fade__box .fade__img{
    position: absolute;
    top: 0px; left: 0px;
    opacity: 0;
    transition: opacity 1s 0s;
    
}

.fade__box .active {
    opacity: 1;
}

JavaScript

var fadeCur = -1,
    fadeMax = 3;


setInterval(function(){
    
    fadeCur = (fadeCur+fadeMax+1)%fadeMax;
    var next = (fadeCur+1)%fadeMax,
        prev = (fadeCur+fadeMax-1)%fadeMax;
    
    console.log(prev + '-' + fadeCur + '-' + next);
    
    $('.fade__img').toggleClass('active');
    
}, 1000);