JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="wrapper">
    <div class="img" style="background-image: url('http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg');"></div>
</div>

CSS

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid navy;
    overflow: hidden;
}

.img {
    width: 100%;
    padding-bottom: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

JavaScript

$('.wrapper').on('mouseenter', function() {
     $('.img').css({
         transform: 'scale(2.5)'
     });
 });
 
 $('.wrapper').on('mouseleave', function() {
     $('.img').css({
         transform: 'scale(1.0)',
         backgroundPosition: 'center center'
     });
 });
 
 $('.wrapper').on('mousemove', function(e) {
     $('.img').css({
         backgroundPosition: (e.pageX * -1) + 'px ' + (e.pageY * -1) + 'px'
     });
 });