JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
    </head>
    <body>
        <div>
            <div class="jquery-zoomer">
                <div class="jquery-zoomer-content"><a href="#"><img src=""/></a></div>
                <div class="jquery-zoomer-content"><a href="#"><img src=""/></a></div>
            </div>
            <div class="jquery-zoomer">
                <div class="jquery-zoomer-content"><a href="#"><img src=""/></a></div>
                <div class="jquery-zoomer-content"><a href="#"><img src=""/></a></div>
            </div>
        </div>
    </body>
</html>

CSS

.jquery-zoomer{
    border:1px solid;
    width:50px;
    float:left;
    position: relative;
}

.jquery-zoomer div a img{
    background:Green;
}

JavaScript

(function($){
    
    $.fn.jqueryzoomer = function(options){
        var o = $.extend({
            speed:'fast',
            imageInitHeight: 150,
            imageInitWidth: 150,
            contentHeight: 250,
            contentWidth: 250
        }, o || options),
        $this = $(this),
        $content = $this.find('div'),
        $img = $content.find('img'),
        topDistance = 0,        
        leftDistance = 0;
        
        $content.width(o.contentWidth);
        $content.height(o.contentHeight);
        
        $img.css('position', 'relative');
        $img.width(o.imageInitWidth);
        $img.height(o.imageInitHeight);
        
        topDistance = ($content.height() - $img.height()) / 2;
        leftDistance = ($content.width() - $img.width()) / 2;
        
        $img.css('top', topDistance + 'px');
        $img.css('left', leftDistance + 'px');
            
        $img.hover(
            function(){                
                $(this).stop(true).animate({
                    width: "250px",
                    height: "250px",
                    top: 0,
                    left: 0
                }, o.speed);                
            }, 
            function(){
                $(this).stop(true).animate({
                    width: "50px",
                    height: "50px",
                    top: topDistance,
                    left: leftDistance
                }, o.speed);
            }            
        );
    };
  
})(jQuery);

$(function(){
    $('.jquery-zoomer').jqueryzoomer({imageInitHeight:50, imageInitWidth:50, contentHeight:250, contentWidth:250, speed:'fast'}); 
});