JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fancy-img">
    <img id="img1" src="http://upload.wikimedia.org/wikipedia/en/7/72/Example-serious.jpg" alt="" />
</div>

<div class="fancy-img">
    <img id="img2" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png" alt="" />
</div>

CSS

.fancy-img{
    display:inline-block;
    position: relative;
}

.indicator{
    width: 150px;
    height: 150px;
    border: 2px solid green;
    position: absolute;
}

.fancy-img{
    max-height:400px;
    max-width: 300px;
    overflow: auto;
}

JavaScript

$(document).ready(function(){
    // add indicator functionality for each img
    $('.fancy-img').each(function(){
        // button to toggle indicator
        $(this).after('<button class="indicator-btn" data-imageid="' + $(this).find('img').attr('id') + '" type="button">Adjust Indicator</button>');
    });    
    
    // handle button click
    $('button.indicator-btn').click(function(){
        var imgId = $(this).data('imageid');
        
        // insert indicator
        $('#' + imgId).before('<div class="indicator" />');
        
        // center indicator (also adjust for offset)
        var containerWidth = $('#' + imgId).parents('.fancy-img:first').width();
        var containerHeight = $('#' + imgId).parents('.fancy-img:first').height();
        var indicatorWidth = $('.indicator:first').width();
        var indicatorHeight = $('.indicator:first').height();
        var newIndicator = $('#' + imgId).parents('.fancy-img:first').find('.indicator');
        
        $(newIndicator).css({
            left: containerWidth/2 - indicatorWidth /2 + $('#' + imgId).parents('.fancy-img:first').scrollLeft(),
            top: containerHeight/2 - indicatorHeight/2 + $('#' + imgId).parents('.fancy-img:first').scrollTop()
        });
    });
});