JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<div id="div"><img alt="Test_Form_4 distorded border - Original image" id="img11" class="internal default" src="https://developer.mozilla.org/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" /></div>

CSS

div {
  top: 0px;
  margin: 0px;
  width: 100%;
  height: 500px;
  min-height: 100%;
  border: 1px solid;
}

img {
  -webkit-filter: drop-shadow(16px 16px 10px black);
  filter: drop-shadow(16px 16px 10px black);
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6%;
}

JavaScript

var img = $('#img11');
var offset = img.offset();

$('#div').mousemove(function(event) {
  var rad = Math.sqrt(Math.pow((event.pageX - (offset.left + img.width() / 2)) / 10, 2) + Math.pow((event.pageY - (offset.top + img.height() / 2)) / 10, 2));
  var css = 'drop-shadow(' + (offset.left - event.pageX + (img.width() / 2)) + 'px ' + (offset.top - event.pageY + (img.height() / 2)) + 'px ' + (rad + 5) + 'px rgba(0,0,0,.8))';
  img.css({
    'filter': css,
    '-webkit-filter': css
  });
});