Try using background: url('image_url') fixed;
for your magnyfying glass element.
I have provided a simple example on top of which you should be able to develop your solution:
$(document).ready(function() {
$(document).mousemove(function(event) {
$('#color_peek').css({
top: (event.pageY - ($('#color_peek').width() / 2)) + 'px',
left: (event.pageX - ($('#color_peek').height() / 2)) + 'px'
});
});
});
body {
margin: 0px;
padding: 0px;
overflow: hidden;
background: url('http://usa-wallpapers10.net/wp-content/uploads/images/22/mardi-gras.jpg');
}
#color_peek {
position: relative;
width: 100px;
height: 100px;
border: 2px solid black;
border-radius: 50px;
background: url('http://usa-wallpapers10.net/wp-content/uploads/images/22/mardi-gras.jpg') fixed;
-webkit-filter: brightness(150%) contrast(150%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="color_peek">
</div>
</body>