JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="zoom-container" style="height:100%; width:100%;">
    <div>
      <img src="http://placehold.it/1000x1500" />
    </div>
  </div>

  <div id="zoom-toolbar">
    <button id="zoom-in">Zoom in</button>
    <button id="zoom-out">Zoom out</button>
  </div>
</body>

CSS

* {
  margin: 0;
  padding: 0;
}

img {
  display: block;
}

html,
body {
  height: 100%;
  width: 100%;
}

#zoom-toolbar {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

var content = document.getElementById('zoom-container').children[0];

content.style.transitionDuration = '300ms';
content.style.transitionTimingFunction = 'ease-in-out';
content.style.transitionProperty = 'transform';
content.style.transformOrigin = '0 0 0';
content.style.willChange = 'transform';

document.getElementById('zoom-in').addEventListener('click',
  function zoomIn() {
    content.style.transform = 'matrix(2, 0, 0, 2, 0, 0)';
  }, false);

document.getElementById('zoom-out').addEventListener('click',
  function zoomOut() {
    content.style.transform = 'matrix(0.2, 0, 0, 0.2, 0, 0)';
  }, false);