JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<label id="press">Press</label>
<label id="reset">Reset</label>
<label id="animate">Animate</label>

<div id="container">
    <div class="line">
        <div class="card bg">
            <div class="title">title 1</div>            
            <div class="gallery"></div>            
        </div>
        <div class="card bg">
            <div class="title">title 2</div>            
        </div>
        <div class="card bg">
            <div class="title">title 3</div>            
        </div>
        <div class="card bg">
            <div class="title">title 4</div>            
        </div>
    </div>
    <div class="line">
        <div class="card bg">
            <div class="title">title 5</div>            
        </div>
        <div class="card bg">
            <div class="title">title 6</div>            
        </div>
        <div class="card bg">
            <div class="title">title 7</div>            
        </div>
        <div class="card bg">
            <div class="title">title 8</div>            
        </div>
    </div>
    <div class="line">
        <div class="card bg">
            <div class="title">title 9</div>            
        </div>
        <div class="card bg">
            <div class="title">title 10</div>            
        </div>
        <div class="card bg">
            <div class="title">title 11</div>            
        </div>
        <div class="card bg">
            <div class="title">title 12</div>            
        </div>
    </div>
</div>

CSS

#container{position:absolute;top:50px;left:130px;border:solid 1px red;width:200px;height:200px;display:table;overflow:hidden}
.bg {
    width:inherit;
    height:inherit;
    background: url(http://www.italianoitaliano.es/assets/images/skype_logo_50x50.jpg) no-repeat ;
    background-size:100% auto;
    background-origin: cover;
}

.card{display:table-cell;border:solid 1px green;padding:0;}
.line{display:table-row;;clear:left;border:solid 1px lime;margin:0;font-family:vardena;}
.title{position:absolute;bottom:0;font-size:1em;border:solid 1px yellow;}
.gallery {position:relative;width:100%;height:20px;border:solid 1px cyan;}

#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}
#animate{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": "50px",
        "width": "200px",
        "height": "200px"
    }, 1000);

    //$(".card").animate({"left":"-100px"},2000);
    $(".card").animate({
        "top": "0",
        "left": "0"
    }, 600);
    $(".card").animate({
        "position": "relative"
    }, 600, "easeInOutQuint");

});

$("#press").on("click", function() {
    $("#container").animate({
        "width": "+=400px",
        "height": "+=400px"
    }, 1200);

/*$("table td").stop().animate({
        "padding": "+=32px";
    }, 3000, "easeInOutQuart");
*/
/*$(".card").stop().animate({
        "height": "+=320px",
        "width": "+=320px"
    }, 3000, "easeInOutQuart");*/

});
//alert($(".card").length);
//$(".bg").css("backgroundSize", "90% auto");
//cImage = $(".bg");
//currentUrl = $(".bg").css("backgroundImage");
//    $(".bg").css("background-image", "url('http://www.italianoitaliano.es/assets/images/skype_logo_50x50.jpg')");
//currentUrl = $(".bg").css("backgroundImage");
$(".card").css("position", "relative");
$(".card").css({
    "top": "+=200px",
    "left": "+=200px",
    width: "25px",
    height: "25px"
});
var i=1
$("#animate").on("click", function(e , index) {
$(".card").each(function() {
    var t = Math.random(1000) * 10000;
    var l = Math.random(1000) * 10000;
    
    i*=-1;
    $(this).animate({
        "top": "+=" + (t * i)+ "px",
        "left": "+=" + (l * i) + "px"
    }, 1200, "easeInOutQuint")
})
        });