JSFiddle - React, Tailwind, and code Playground

by creed88

HTML

<div class="magnify">
	<div class="large"></div>
	<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/>
</div>

CSS

.magnify {
    width: 200px;
    margin: 50px auto;
    position: relative;
}

.large {
    width: 175px;
    height: 175px;
    position: absolute;
    border-radius: 100%;
    
    /*Multiple box shadows to achieve the glass effect*/
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
        0 0 7px 7px rgba(0, 0, 0, 0.25), 
        inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    
    background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;
    display: none;
}

.small { display: block; }

JavaScript

$(document).ready(function(){

	var native_width = 0;
	var native_height = 0;

	$(".magnify").mousemove(function(e){

		if(!native_width && !native_height)
		{
			var image_object = new Image();
			image_object.src = $(".small").attr("src");
			
			native_width = image_object.width;
			native_height = image_object.height;
		}
		else
		{
			var magnify_offset = $(this).offset();
			var mx = e.pageX - magnify_offset.left;
			var my = e.pageY - magnify_offset.top;
			
			if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
			{
				$(".large").fadeIn(100);
			}
			else
			{
				$(".large").fadeOut(100);
			}
			if($(".large").is(":visible"))
			{
				var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
				var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
				var bgp = rx + "px " + ry + "px";

				var px = mx - $(".large").width()/2;
				var py = my - $(".large").height()/2;

				$(".large").css({left: px, top: py, backgroundPosition: bgp});
			}
		}
	})
})