JSFiddle - React, Tailwind, and code Playground

HTML

<section><img src="http://placehold.it/200x130"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</p></section>

CSS

body {
                position: relative;
                padding: 0px;
            }
            
            .magnifying_glass {
                width: 200px;
                height: 200px;
                position: absolute;
                top: 0px;
                left: 0px;
                overflow: hidden;
                
                border-radius: 100px; /* Half glass max width height */
                -moz-border-radius: 100px; /* Half glass max width height */
                -webkit-border-radius: 0px;
                
                border: 1px solid red;
                background-color: white;
                
                z-index: 1000;
            }
            
            .magnifying_glass .magnified_content {
                top: 0px;
                left: 0px;
                
                margin-left: -100px; /* Half glass width */
                margin-top: -100px; /* Half glass height */
                
                overflow: visible;
                
                position: absolute;
                display: block;
                
                transform:scale(2);
                -moz-transform:scale(2);
                -webkit-transform:scale(2);
                -ms-transform:scale(2);
                -o-transform:scale(2);
                
                transform-origin: left top;
                -moz-transform-origin: left top;
                -ms-transform-origin: left top;
                -webkit-transform-origin: left top;
                -o-transform-origin: left top;
                
                user-select: none;
                -moz-user-select: none;
                -webkit-user-select: none;
            }
            
            .magnifying_glass .magnifying_lens {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                
                opacity: 0.0;
                -ms-filter:...

JavaScript

var scale = 3;

var $magnifyingGlass = $('<div class="magnifying_glass"></div>');
var $magnifiedContent = $('<div class="magnified_content"></div>');
var $magnifyingLens = $('<div class="magnifying_lens"></div>');

//setup
$magnifiedContent.css({
    backgroundColor: $("html").css("background-color") || $("body").css("background-color"),
    backgroundImage: $("html").css("background-image") || $("body").css("background-image"),
    backgroundAttachment: $("html").css("background-attachment") || $("body").css("background-attachment"),
    backgroundPosition: $("html").css("background-position") || $("body").css("background-position")
});

//$magnifiedContent.html(innerShiv($(document.body).html())); //fix html5 for ie<8, must also include script
$magnifiedContent.html($(document.body).html());

$magnifyingGlass.append($magnifiedContent);
$magnifyingGlass.append($magnifyingLens); //comment this line to allow interaction
$(document.body).append($magnifyingGlass);

//funcs


function updateViewSize() {
    $magnifiedContent.css({
        width: $(document).width(),
        height: $(document).height()
    });
}

//begin
updateViewSize();

//events
$(window).resize(updateViewSize);

$magnifyingGlass.mousedown(function(e) {
    e.preventDefault();
    $(this).data("drag", {
        mouse: {
            top: e.pageY,
            left: e.pageX
        },
        offset: {
            top: $(this).offset().top,
            left: $(this).offset().left
        }
    });
});

$(document.body).mousemove(function(e) {
    if ($magnifyingGlass.data("drag")) {
        var drag = $magnifyingGlass.data("drag");

        var left = drag.offset.left + (e.pageX - drag.mouse.left);
        var top = drag.offset.top + (e.pageY - drag.mouse.top);

        $magnifyingGlass.css({
            left: left,
            top: top
        });
        $magnifiedContent.css({
            left: -left * scale,
            top: -top * scale
        });

    }
}).mouseup(function() {
   ...