JSFiddle - React, Tailwind, and code Playground

by HugeHugh

HTML

<h3>Move your mouse over the puppies!</h3>
<a target="_blank" href="http://www.hughanderson.com/">Written by Hugh Anderson</a>
<div class="clear"></div>
<div id="source"><div id="zoomBox"></div></div>
<div id="magnified"></div>

CSS

#source{
    width:320px; height:240px;
    background:url(http://onwardstate.com/wp-content/uploads/2012/11/golden-retreiver-puppies.jpeg) no-repeat;
    background-size:cover;
    border:1px solid black;
    float:left;
    cursor:move;
    position:relative;
    overflow:hidden;
}
#magnified{
    width:640px; height:480px;
    border:1px solid black;
    float:left;
    background:url(http://onwardstate.com/wp-content/uploads/2012/11/golden-retreiver-puppies.jpeg) no-repeat;
    background-position:2000px 0;
    margin-left:1em;
}
#zoomBox {
    width:128px; height: 96px; border:1px dotted rgba(255,255,0,0.6);
    background:rgba(255,255,255,0.2);
    position:absolute;
    left:-400px; top:0;
}
* {font-family:sans-serif}
h3 {float:left; margin:0 0 1em 0}
a {font-size:small; display:block; text-align:right; float:right}
.clear {clear:both}

JavaScript

$(function() {
    var $source = $('#source'),
        $magnified = $('#magnified'),
        $zoomBox = $('#zoomBox'),
        size = {
            source: {
                width: $source.width(),
                height: $source.height()
            },
            magnified: {
                width: $magnified.width(),
                height: $magnified.height()
            },
            zoomBox: {
                width: $zoomBox.width(),
                height: $zoomBox.height()
            },
            img: {
                width:1600,
                height:1200
            }
        },
        halfzb = {
            width: size.zoomBox.width / 2,
            height: size.zoomBox.height / 2
        },
        maxzbCoord = {
            x: size.source.width - size.zoomBox.width - 2,
            y: size.source.height - size.zoomBox.height - 2
        },
        maximgCoord = {
            x: size.img.width - size.magnified.width,
            y: size.img.height - size.magnified.height
        },
        pageLoc = $source.offset(),
        zbLoc, percOff, localCoords, cssOffset;
    $source.mouseenter(function (e) {
        pageLoc = $source.offset();
    }).mousemove(function(e) {
        localCoords = {
            x: e.clientX - pageLoc.left - 1,
            y: e.clientY - pageLoc.top - 1
        };
        zbLoc = {
            left: Math.min(Math.max(0, localCoords.x - halfzb.width), maxzbCoord.x),
            top: Math.min(Math.max(0, localCoords.y - halfzb.height), maxzbCoord.y)
        };
        percOff = {
            x: zbLoc.left / maxzbCoord.x,
            y: zbLoc.top / maxzbCoord.y
        };
        cssOffset = '-' + (percOff.x * maximgCoord.x) + 'px -' + (percOff.y * maximgCoord.y) + 'px';        
        $zoomBox.css(zbLoc);
        $magnified.css('background-position',cssOffset);
    }).mouseout(function(e) {
        $zoomBox.css('left','-400px');
        $magnified.css('background-position','2000px 0');
    });
});