JSFiddle - React, Tailwind, and code Playground

HTML

<div class="magnify">
	
  	  <img class="small" src="http://placehold.it/300x150" width="400"/> <!-- This is the underlying content -->
      <a href="#" target = "_blank" style="position:absolute;left:50%;top:40%;width:20px;height:20px;border:5px solid red; border-radius:10px">Demo clickable link</a>
	  <div class="large"></div> <!-- This is the magnifying glass -->
	
    </div>
<p id="demo"></p>

CSS

* {margin: 0; padding: 0;}

body{padding:50px;}

.magnify {width: 900px; margin: 50px auto; position: relative;border:1px solid red;}

/* image size */
.small { display: block; width:900px;}

/*magnifying glass*/
.large {
	width: 275px; height: 275px;
	position: absolute;
	border-radius: 100%;
	
    pointer-events:none; /* allows user to click through the div to 
                         underlying content */
    
	/*Multiple box shadows to achieve the glass effect*/
	box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
	0 0 7px 7px rgba(0, 0, 0, 0.25), 
	inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    
}

JavaScript

$(document).ready(function(){

	$(".magnify").mousemove(function(e){
        
        x = e.clientX;
        y = e.clientY;
        coor = "Coordinates: (" + x + "," + y + ")";
        document.getElementById("demo").innerHTML = coor;

        //x/y coordinates of the mouse
        //position of .magnify with respect to the document.
        var magnify_offset = $(this).offset();
        //deduct the positions of .magnify from the mouse positions to get the mouse positions with respect to the 
        //container(.magnify)
        var mx = e.pageX - magnify_offset.left;
        var my = e.pageY - magnify_offset.top;

        //fade out the glass if the mouse is outside the container
        if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
        {
            $(".large").fadeIn(100);
        }
        else
        {
            $(".large").fadeOut(100);
        }
        if($(".large").is(":visible"))
        {
            //move the magnifying glass with the mouse
            var px = mx - $(".large").width()/2;
            var py = my - $(".large").height()/2;
            //deduct half of the glass's width and height from the 
            //mouse coordinates to place it with its center at the mouse coordinates

            $(".large").css({left: px, top: py});
        }
	})
})