JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="back"></div>
    <div class="main"></div>
</div>

CSS

.container {
    position:absolute;
    top:0px;
    left:50%;
    margin-left:-75px;
    width:130px;
    height:130px;
    border:10px solid yellow;
}
.back {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.main {
    position:relative;
    text-align:center;
    color:white;
    background-color:transparent;
}

JavaScript

$(function () {
    var colors = ['black', 'red', 'blue', 'black'];
    var images = [
        "http://i.imgur.com/7LwX7Sr.png",
        "http://i.imgur.com/ouyoybJ.png",
        "http://i.imgur.com/afaR6JC.png",
        "http://i.imgur.com/7LwX7Sr.png"
    ];
    var i = 0;
    var cont = $('div.container');
    var back = $('div.back');
    var main = $('div.main');
    back.css('opacity', 1);
    back.css('backgroundColor', colors[0]); // start color , fades out
    cont.css('backgroundColor', colors[1]); // target color
    anim();

    function anim() {
        if (i == colors.length - 1) {
            i = 0;
            //return; // repeat ad infinitum
        }
        var ii = (i+1) % images.length;
        console.log(ii);
        main.html('<img src="' +images[ii]+'"/>');
        back.css({
            backgroundColor: colors[i],
            opacity: 1
        });
        cont.css({
            backgroundColor: colors[i + 1]
        });
        i++;
        back.stop().animate({
            opacity: 0
        }, 2000, anim);
    }
});