JSFiddle - React, Tailwind, and code Playground

by Emanuel Vecchio

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b">click me</button>
<div class="container">
  <img class="background" src="http://lorempixel.com/500/500/sports/2/">
  <div class="overlayer"></div>
  <div id="viewport">
    <img id="view" src="http://lorempixel.com/500/500/sports/2/">
  </div>
</div>

CSS

.container {
  position: relative;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
}

.overlayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  background: black;
  opacity: 0.5;
}

.front {
  position: relative;
  top: 0;
}

#view {
  -webkit-user-drag: none;
}

#viewport {
  position: relative;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 10px;
  transition: all .2s ease-in-out;
}

#viewport > #view {
  margin-left: -100px;
  margin-top: -100px;
}

#viewport.circle {
  border-radius: 50%;
}

JavaScript

var a = document.getElementById("viewport");
var b = document.getElementById("b");

var v = document.getElementById("view");

b.addEventListener('click', function(e) {
  a.classList.toggle('circle');
});

v.addEventListener('mousedown', function(e) {
  console.log("drag start");
  return false;
}, false);