JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<label id="press">Press</label>
<label id="reset">Reset</label>
<div id="container">
<div class="line">
    <div class="card">
    <div class="bg">   
        <img src="http://wishtest.silvertive.com/WWS/images/50/33cc9214-6df2-4a26-a959-1c003b0b8820.jpg" alt="background image" class="bg" />
    </div>
</div>
    <div class="card">
    <div class="bg">   
        <img src="http://wishtest.silvertive.com/WWS/images/50/33cc9214-6df2-4a26-a959-1c003b0b8820.jpg" alt="background image" class="bg" />
    </div>
</div>
    <div class="card">
    <div class="bg">   
        <img src="http://wishtest.silvertive.com/WWS/images/50/33cc9214-6df2-4a26-a959-1c003b0b8820.jpg" alt="background image" class="bg" />
    </div>
</div>
    <div class="card">
    <div class="bg">   
        <img src="http://wishtest.silvertive.com/WWS/images/50/33cc9214-6df2-4a26-a959-1c003b0b8820.jpg" alt="background image" class="bg" />
    </div>
</div>
    <div class="card">
    <div class="bg">   
        <img src="http://wishtest.silvertive.com/WWS/images/50/33cc9214-6df2-4a26-a959-1c003b0b8820.jpg" alt="background image" class="bg" />
    </div>
</div>
    <div class="card">
    <div class="bg">   
        <img src="http://wishtest.silvertive.com/WWS/images/50/33cc9214-6df2-4a26-a959-1c003b0b8820.jpg" alt="background image" class="bg" />
    </div>
</div>
    <div class="card">
    <div class="bg">   
        <img src="http://wishtest.silvertive.com/WWS/images/50/33cc9214-6df2-4a26-a959-1c003b0b8820.jpg" alt="background image" class="bg" />
    </div>
</div>
    <div class="card">
    <div class="bg">   
        <img src="http://wishtest.silvertive.com/WWS/images/50/33cc9214-6df2-4a26-a959-1c003b0b8820.jpg" alt="background image" class="bg" />
    </div>
</div>
    <div class="card">
    <div class="bg">   
        <img src="http://wishtest.silvertive.com/WWS/images/50/33cc9214-6df2-4a26-a959-1c003b0b8820.jpg" alt="background image" class="bg" />
    </div>
</div>
    <div class="card">
   ...

CSS

.bg{ vretical-align:middle;width:50px;height:50px;}
img.bg1 {
  position:static;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-repeat: no-repeat;
  text-align:center;
  margin:0 auto;
}
img.bg {
    width:100%;
    height:100%;
    background-image: url(http://wishtest.silvertive.com/WWS/images/50/33cc9214-6df2-4a26-a959-1c003b0b8820.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 200px 200px;
}

.card{margin:0 auto;margin:0 auto;display:inline-block}
.line{width:15000px;clear:both;}
#container{position:absolute;top:0;left:0;z-index:-10}
#press{display:inline-block;border:solid 2px red;background-color:#000;color:#fff;}
#reset{display:inline-block;border:solid 2px red;background-color:#000;color:#fff}

JavaScript

$("#reset").on("click", function() {
    //enter each action to window.setTimeout() ??        
    $(".card").animate({
        "height": "50px",
        "width": "50px"
    }, 2000)
    $("img.bg").css({
        "height": "50px",
        "width": "50px"
    })
    $("#container").animate({
        "left": "0px",
        "top": "0px"
    }, 1000)
})

$("#press").on("click", function() {
    $("#container").animate({
        "left": "-=60",
        "top": "-=60"
    }, 1, function() {
        $("img.bg").animate({
            "height": "+=60",
            "width": "+=60"
        }, 1000)
        $(".card").css({
            "height": "+=70",
            "width": "+=70"
        }, 2500)

    })


})