JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="box dpbox">
  <img src="https://sun9-60.userapi.com/c205820/v205820830/8663e/5QUHJhzhRDY.jpg" class="plogo">
  <picture>
	<img src="https://sun9-23.userapi.com/c205820/v205820830/86637/HPX5wS3VkhQ.jpg" alt="" class="pimg">
	</picture>
</div>

CSS

body {
	margin:0;
	background: #22262D;
}
.box {
    width: 300px;
    height: 400px;
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
}

.plogo {
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    margin: auto;
    z-index: 3;
}

.pimg {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-265px, 35px) scale(0.6);
}

picture {
    position: absolute;
    width: 100%;
    height: 100%;
}

JavaScript

gsap.defaults({
	overwrite: "auto"
})


$('.box').mouseenter(function(event){
  gsap.to(this.querySelector('.plogo'),0.4,{y:"-20%", opacity:0,ease: "power2.out",overwrite: true,})
  gsap.to(this.querySelector('.pimg'), {
    duration:1,
    scale:1,
    x:-230,
    y:-5,
    rotate:13,
    overwrite: true,
    ease: "power2.out"
  });

});


$('.box').mousemove(function(event){
let widthPer = ~~(((event.pageX - this.offsetLeft))*100/this.offsetWidth) - 50,
  heightPer = ~~(((event.pageY - this.offsetTop))*100/this.offsetHeight) - 50;
  gsap.to(this.querySelector('picture'),{
    duration:1,
    x:(widthPer/4)*(-1) + "%",
    y:(heightPer/4)*(-1) + "%",
    overwrite: true,
    ease: "power2.out"
  });
});


$('.box').mouseleave(function(){
gsap.to(this.querySelector('.pimg'), 0.7, {
    x:-265,
    y:35,
    scale:0.6,
    rotate:0
  });
gsap.to(this.querySelector('.plogo'),0.4,{y:"0%", opacity:1,ease: "power2.out", delay:0.2});
gsap.to(this.querySelector('picture'),0.4,{x:"0%",y:"0%",});
});