JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    </head>
    <body id="body">
        <div id="container" style="position: relative">
            <div id="pack1" class="screenItem cardPack"></div>
            <div id="pack2" class="screenItem cardPack"></div>
            <div id="pack3" class="screenItem cardPack"></div>
            <div id="pack4" class="screenItem cardPack"></div>
        </div>
        
        <div id="hiddenContainer">
            <div id="deck">
                <div id="card1"></div>
                <div id="card2"></div>
            </div>
        </div>
        
        <div id="tempHiddenContainer">
        </div>
        
        </body>
</html>

CSS

#pack1{
    margin-left: 20px;
    margin-top: 20px;
    height: 193px;
    width: 127px;
    background-image: url(http://tmp.mattfellows.me.uk/images/image1.png);
    background-size: 100% 100%;
    float: left;
    clear: both;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;     
    transition: all 1s ease-in-out;
}

#pack2{
    margin-right: 20px;
    margin-top: 20px;
    height: 193px;
    width: 127px;
    background-image: url(http://tmp.mattfellows.me.uk/images/image2.png);
    background-size: 100% 100%;
    float: right;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;     
    transition: all 1s ease-in-out;
}

#pack3{
    margin-left: 20px;
    margin-top: 20px;
    height: 193px;
    width: 127px;
    background-image: url(http://tmp.mattfellows.me.uk/images/image3.png);
    background-size: 100% 100%;
    float: left;
    clear: both;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;     
    transition: all 1s ease-in-out;
}

#pack4{
    margin-right: 20px;
    margin-top: 20px;
    height: 193px;
    width: 127px;
    background-image: url(http://tmp.mattfellows.me.uk/images/image4.png);
    background-size: 100% 100%;
    float: right;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;     
    transition: all 1s ease-in-out;
}
#body,
.ui-page {
background-image: url(http://tmp.mattfellows.me.uk/images/bg.png);
background-size: auto 100%;
background-repeat: repeat-x;
}

#container {
margin: auto;
width: 310px;
height: 568px;
}

#hiddenContainer, #tempHiddenContainer {
    display: none;
}

JavaScript

$(document).ready(function() {
                  // Set a timeout...
                 setTimeout(function(){
                   // Hide the address bar!
                   window.scrollTo(0, 1);
                 }, 0);
                  
              $(".cardPack").each(function (i, cardPack) {
                  var currentId = $(cardPack).attr("id");
                  
                  $(cardPack).click(function() {
                      var left = $(cardPack).position().left;
                      var top = $(cardPack).position().top;
                      var width = $(cardPack).width();
                      var height = $(cardPack).height();
                      var contwidth = $("#container").width();
                      var contheight = $("#container").height();
                      console.log(left + ":" + top + ":" + contwidth + ":" + height);
                      $(cardPack).css("-webkit-transform", "scale(2.5,2.5)");
                      $(cardPack).css("-webkit-transform-origin", (3*(left/4)) + " " + (3*(top/4)));
                      setTimeout(function() {
                            $(".screenItem").each(function(i, elem) {
                                if ($(elem).attr("id") != currentId) {
                                    $(elem).css("-webkit-transition", "none");
                                    $(elem).css("-moz-transition", "none");
                                    $(elem).css("-o-transition", "none");
                                    $(elem).css("-ms-transition", "none");
                                    $(elem).css("transition", "none");
                                    $(elem).css("visibility", "hidden");
                                }
                            });
                            $(cardPack).css("opacity", "0");
                      }, 1000);
                  }); 
              });         
              });