Edit in JSFiddle

var scale = 2;

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

    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

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


function updateViewSize() {
        width: $(document).width(),
        height: $(document).height()



$magnifyingGlass.mousedown(function(e) {
    $(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);

            left: left,
            top: top
            left: -left * scale,
            top: -top * scale

}).mouseup(function() {
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-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: alpha(opacity=0);

                cursor: move;
section{margin:25px;padding:15px;border:dotted 1px #ccc;}
<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>