JSFiddle - React, Tailwind, and code Playground

by Per Andersson

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="container">
  <div id="zoom-container">
    <div class="box red">A</div>
    <div class="box blue">B</div>
    <div class="box green">C</div>
    <div class="box black">D</div>
  </div>
</div>

CSS

* { margin: 0; }

body, html { height: 100%; }

#container {
  height: 100%;
  width: 70%;
  overflow: auto;
  margin: 0 auto;
}

#zoom-container {
  height: 100%;
  width: 100%;
  overflow: auto;
  transition: all 0.2s ease-in-out;
}

.box {
  float: left;
  width: 50%;
  height: 50%;
  color: white;
  text-align: center;
  display: block;
}

.red {
  background: red; 
}
.blue {
  background: blue;
}
.green {
  background: green;
}
.black {
  background: black;
}

JavaScript

(function(zoomed) {
  $(".box").click(function(event) {
    var el = this, elp = el.parentElement;
    if (zoomed) {
      zoomed = false;
      $("#zoom-container").css({'transform': ''});
    } else {
      zoomed = true;      
      var tro = (Math.abs(elp.offsetTop - el.offsetTop) > 0) ? 'bottom' : 'top';
      tro += (Math.abs(elp.offsetLeft - el.offsetLeft) > 0) ? ' right' : ' left';
      $("#zoom-container").css({'transform-origin': tro, 'transform': 'scale(2)'});

      /*
      $("#zoom-container").css({'transform-origin': '0 0', 'transform': 'scale(2)'});
      setTimeout(function() {
        el.scrollIntoView();
      },250);
      */
    }
  });
})();