JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<div class="wideBox">
    <div class="moveBox">
        
        <img src="https://m1.behance.net/rendition/modules/142578481/disp/63d1022bf6ce9700afd496216acce37b.gif" />
        
    </div>
</div>

CSS

.wideBox { width: 100%; height: 52px; border: 1px #000 solid; position: relative; }

.moveBox { 
    width: 50px; height: 50px; border: 0px #000 solid;
    position: absolute; right: 200px; }

JavaScript

$(document).ready(function(){
  $('div.wideBox').mousemove(function(e){
        var x = e.pageX - this.offsetLeft;
      if (x <= 400) {
          $('div.moveBox').css({'right': x}); 
      }
  });
});