JSFiddle - React, Tailwind, and code Playground

by vishal pandey

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/zoomooz/1.1.6/jquery.zoomooz.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zoomooz/1.1.6/jquery.zoomooz.js"></script>
<div id="theatre" class="zoomViewport">
        <div class="container zoomContainer">
            <div id="bmessage">Select the seats that you need.</div>

            <div id="seats" class="zoomTarget">

                <div class="avail std green" si="332" title="Y1" style="top: 8.7%; left: 10.2%; border: none; margin: 3px 1px;"></div>
                <div class="avail std green" si="333" title="Y2" style="top:8.7%; left:13%;"></div>
                <div class="avail std green" si="334" title="Y3" style="top:8.7%; left:16.2%;"></div>
                <div class="avail std green" si="335" title="Y4" style="top: 8.7%; left: 18.8%; border: none; margin: 3px 1px;"></div>
                <div class="avail std green" si="336" title="Y5" style="top: 8.7%; left: 21.5%; border: none; margin: 3px 1px;"></div>
                <div class="avail std green" si="337" title="Y6" style="top:8.7%; left:24.2%;"></div>
            </div>



        </div>
        </div>

CSS

.container {
  margin: 0 auto;
}

#bmessage {
    padding: 1px 3px;
    height: 20px;
    font-size: 14px;
    background: #ddf;
    color: #080;
    font-weight: bold;
}
#seats:before {
    content: '';
    display: block;
    padding: 50%;
}

#seats {
    margin: 10px 0;
    padding: 10px 0;
    position: relative;
    background-image: url(https://s21.postimg.org/qd8mqgh07/seatplan11.gif);
    background-repeat: no-repeat;
    background-size: contain;
}

#seats div {
    position: absolute;
    width: 1.5%;
    height: 1.5%;
}

#seats .green {
    background: url('https://s12.postimg.org/93ugmrvb1/seatg.gif') no-repeat center;
    background-size: cover;
    margin:0 !important;
}

JavaScript

$(document).ready(function() {
    $("#seats").click(function(evt) {
        $(this).zoomTo({targetsize:0.75, duration:600});
        evt.stopPropagation();
    });
});