JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<script src="https://s3.us-east-2.amazonaws.com/cdn.colabora.io/hammer.js"></script>
<script src="https://s3.us-east-2.amazonaws.com/cdn.colabora.io/TweenMax.js"></script>
<script src="https://s3.us-east-2.amazonaws.com/cdn.colabora.io/jquery.pinchzoomer.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="zoomHolder">
  <div data-elem="pinchzoomer">
    <img id="streetLayer" data-src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" data-elem="bg" class="layerImg" />
  </div><div class="controlHolder" data-elem="controlHolder" style="width:130px; height:30px; background:rgba(255,255,255,0.70); top:10px; margin:auto; left:auto; right:auto; bottom:auto; position:relative">
  <div class="zoomIn" data-elem="zoomIn"><i class="fa fa-search-plus" aria-hidden="true"></i></div>
  <div class="zoomOut" data-elem="zoomOut"><i class="fa fa-search-minus" aria-hidden="true"></i></div>
</div>
</div>

CSS

.zoomHolder {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden
}

.layerImg {
  position: absolute;
  left: 0px;
  top: 0px;
  right: auto;
  bottom: auto;
}