MagnifierRentgen jQuery Plugin - https://github.com/agragregra/MagnifierRentgen

MagnifierRentgen (by A.Klimanov)

How to use the plugin
$(".test-plugin").magnifierRentgen();</pre>
______________________________________________________

SASS:
.magnifierRentgen
	box-sizing: border-box
	overflow: hidden
	position: relative
	width: 100%
	.magnifier-loupe
		overflow: hidden
		position: absolute
		border-radius: 10em
		top: 0
		left: 0
		border: #f0f0f0 4px solid
		box-shadow: rgba(0,0,0,.3) 5px 5px 8px
		cursor: none
		transform: scale(1.4)
		display: none
_________________________________________________________________
CSS.min:
.magnifierRentgen{box-sizing:border-box;overflow:hidden;position:relative;width:100%}.magnifierRentgen .magnifier-loupe{overflow:hidden;position:absolute;border-radius:10em;top:0;left:0;border:#f0f0f0 4px solid;box-shadow:rgba(0,0,0,0.3) 5px 5px 8px;cursor:none;transform:scale(1.4);display:none}

-------------------------------------------------------------------
JS:
$.fn.magnifierRentgen = function() {

	return this.each(function() {

		var th        = $(this),
		dataImage     = th.data("image"),
		dataImageZoom = th.data("image-zoom"),
		dataSize      = th.data("size");

		th
		.addClass("magnifierRentgen")
		.resize(function() {
			th.find(".data-image, .magnifier-loupe img").css({
				"width" : th.width()
			})
		})
		.append("
			<img class='data-image' src='" + dataImage + "'>
			<div class='magnifier-loupe'>
				<img src='" + dataImageZoom + "'>
			")
			.hover(function() {
				th.find(".magnifier-loupe").stop().fadeIn()
			}, function() {
				th.find(".magnifier-loupe").stop().fadeOut()
			})
			.find(".data-image").css({
				"width" : th.width()
			}).parent().find(".magnifier-loupe").css({
					"width"  : dataSize,
					"height" : dataSize
				})
				.find("img").css({
					"position" : "absolute",
					"width"    : th.width()
				});

		th.mousemove(function(e) {

			var elemPos = {},
				offset  = th.offset();

			elemPos = {
				left : e.pageX - offset.left - dataSize/2,
				top  : e.pageY - offset.top - dataSize/2
			}

			th
			.find(".magnifier-loupe").css({
					"top"  : elemPos["top"],
					"left" : elemPos["left"]
				})
				.find("img").css({
					"top"   : -elemPos["top"],
					"left"  : -elemPos["left"],
					"width" : th.width()
				})

		});

		$(window).resize(function() {
			$(".magnifierRentgen").resize();
		});

	});

};

README.MD
<h1>jQuery MagnigierRentgen Plugin</h1>

<p>Author: <strong>WebDesign Master</strong></p>
<p><a href="https://youtube.com/agragregra" target="_blank">https://youtube.com/agragregra</a></p>
<p><a href="http://agragregra.github.io/demos/MagnifierRentgen/" target="_blank">Demo</a></p>

<h2>Use</h2>

<ol>
	<li>
<pre>&lt;div class="test-plugin"
data-image="img/msi.jpg"
data-image-zoom="img/msi-open.jpg"
data-size="100">&lt;/div&gt;</pre>
	</li>
	<li>
<pre>
$(".test-plugin").magnifierRentgen();</pre>
	</li>
</ol>