.magnify {width: 400px; margin: 50px auto; position: relative;}
.large {width: 450px; height: 350px; position: absolute; border-radius: 0%; 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(/2014/09/30/headline-2/&) no-repeat; display: none;}
.small {display: block;}
$(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 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});
}
}
})
})