JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<div class="box">
  <img src="http://gravatar.com/avatar/5a224f121f96bd037bf6c1c1e2b686fb?s=512">
</div>
<div id="center"></div>

CSS

.box {
  position:absolute;
  width:512px;
  height:512px;
  overflow:hidden;
  background-color:#ccc;
  
}
img {
  position:relative;
}
#center {
  width:20px;
  height:20px;
  left:246px;
  top:246px;
  position:absolute;
  background-color:red;
  opacity:.8;
}

JavaScript

var img = $("img"),
  output = $("#output"),
  scale = 1;



img.click(function (e) {
  var offset = $(this).offset();

  var relX = (e.pageX - offset.left) / scale;
  var relY = (e.pageY - offset.top) / scale;

  scale = Math.random() * 4;


  TweenLite.to(this, 1, {
    css: {
      scale: scale,
      x: (256 - relX) * scale,
      y: (256 - relY) * scale
    }
  });

})

//click the image anywhere