JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<ul class="container">
    <li>
        <img src="http://lorempixel.com/100/100" alt="" class="main-image"/>
        <img src="http://lorempixel.com/100/100" alt="" class="flip-image" />
    </li>
    <li>
        <img src="http://lorempixel.com/100/100" alt="" class="main-image"/>
        <img src="http://lorempixel.com/100/100" alt="" class="flip-image" />
    </li>
    <li>
        <img src="http://lorempixel.com/100/100" alt="" class="main-image"/>
        <img src="http://lorempixel.com/100/100" alt="" class="flip-image" />
    </li>
    <li>
        <img src="http://lorempixel.com/100/100" alt="" class="main-image"/>
        <img src="http://lorempixel.com/100/100" alt="" class="flip-image" />
    </li>
</ul>

CSS

ul{
    list-style:none;
}
li{
 width:100%;
    height:100px;
    display:block;
    position:relative;
}
/* li.flip{
    opacity:0.3;
} */

img {
    overflow: hidden;
    transition-duration: 0.8s;
    
}
.flip-image{
    opacity:0;
    position:absolute;
    left:0;
    top:0;
}

JavaScript

$("li").each(function(i, el){
    var row = $(this);
    var prev = $(this).find(".main-image");
    var next = $(this).find(".flip-image");
    setTimeout(function() {
        row.toggleClass("flip", !row.hasClass("flip"));
        prev.animate({
        'opacity':0
       }, 450);
        next.animate({
        'opacity':1.0
       }, 950);
    },1000*i);
  
});