Масштабируемый вариант (здесь не очень видно в динамике - окно просмотра не меняется при resize)
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
body
{
background: url(http://parallel.ua/f/1/white_grl.jpg) 0 0 no-repeat;
background-size: 100%;
min-width: 750px;
min-height: 760px;
}
#x-ray
{
background: url(http://h-xtech.com/css/laptop-transparent.png) 0 0 no-repeat;
background-size: 100%;
position: absolute;
width: 280px;
height: 200px;
}
#screen
{
background: url(http://parallel.ua/f/1/black_grl.jpg) 0 0 / 128px 102px no-repeat;
position: relative;
top: 10px;
left: 40px;
width: 200px;
height: 130px;
}
</style>
<script>
$( function() {
$("#x-ray").css({top: "-10px", left: "-40px"});
$(document).trigger("mousemove");
});
document.onmousemove = function (evt) {
var e = evt || window.event, div = document.getElementById('x-ray');
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft, scrollY = document.documentElement.scrollTop || document.body.scrollTop
var x = e.clientX + scrollX - 80, y = e.clientY + scrollY - 80;
div.style.left = x + 'px';
div.style.top = y + 'px';
x = x + 40; y = y + 10;
document.getElementById('screen').style.backgroundPosition = '' + -x + 'px ' + -y + 'px';
$('#screen').css({ backgroundSize: $(window).width() + "px" });
}
</script>
</head>
<body>
<div id="x-ray">
<div id="screen">
</div>
</div>
</body>
</html>