JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<div id="image">
    <div class="cover"></div>
    
    <div class="img">
        <img src="https://c1.staticflickr.com/9/8365/8551937456_9f2c1544d3.jpg"/>
    </div>
    <div class="img2">
        <img src="https://c1.staticflickr.com/9/8365/8551937456_9f2c1544d3.jpg"/>
    </div>
    <img src="https://c1.staticflickr.com/9/8365/8551937456_9f2c1544d3.jpg"/>
</div>

CSS

#image{
    width:400px;
    height:300px;
    position:relative;
    margin:0 auto;
    padding:0;
}
#image .img,
#image .img2,
.cover{
    width:400px;
    height:300px;
    position:absolute;
    top:0;
    left:0;
    z-index:10;
    overflow:hidden;
}
.cover{
    left:auto;
    left:0;
    background:#fff;
    z-index:20;
}
#image .img2{
    top:0;
    left:0;
    z-index:5;
}

#image .img img,
#image .img2 img{
    width:400px;
    height:300px;
    display:inline;
    position:absolute;
    top:0;
    left:0;
    
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
#image .img2 img{
    
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
    
}

JavaScript

setTimeout(function(){
    $('.cover').fadeOut(1000, function(){
        $("#image .img").animate({
            width:0
        },1000, "easeInOutQuad");
        setTimeout(function(){
            $("#image .img2").animate({
                width:0
            },1000, "easeInOutQuad");
        },500);
    });
},2000);