JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle" id="first-circle">
    <img src="http://davy0324.netne.net/dummys/dummy1.jpg">
    <a href="">ART</a>
</div>
<div class="circle" id="second-circle">
    <img src="http://davy0324.netne.net/dummys/dummy2.jpg">
    <a href="">FASHION</a>
</div>
<div class="circle" id="third-circle">
     <img src="http://davy0324.netne.net/dummys/dummy4.jpg">
    <a href="">DECOR</a>
</div>

CSS

.circle { 
    order-radius:300px; width:300px; border:5px solid #ccc;
    height:300px;margin:10px; padding:0px; float:left; 
    display:none;
    position:absolute;
}
.circle img{width:100%;height:100%;}
.circle a { 
    position:relative; 
    z-index:999;
    margin:0 auto;
    line-height:300px;
    display:block;
    width:300px;
    text-align:center; 
    font-family: sans-serif;
    font-weight:normal; 
    text-transform:capitalize;
    color:#000;
    font-size:60px;
    text-decoration:none; 
}

JavaScript

$(function(){
    (function(){
        var circles=$('.circle'), i=0;
        function shuffle()
        {
            $(circles[i]).fadeIn(2000, function(){
                i=(i < circles.length-1) ? (i+1) : 0;
                setTimeout(function(){
                    $('.circle').fadeOut(2000);
                    shuffle();
                }, 2000);
            });
        }
        shuffle();
    })();
});