JSFiddle - React, Tailwind, and code Playground

by kachibito

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 {/*zoom DOM*/
    width: 175px; height: 175px;
    position: absolute;
    background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;
    display: none;
}

.small { display: block; }

JavaScript

var native_width = 0;
    var native_height = 0;

    $(".small").load(function(){
        var image_object = new Image();
        image_object.src = $(this).attr("src");
        
        native_width = image_object.width;
        native_height = image_object.height;
        $(".magnify").mousemove(function(e){

            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});
            }
        })
    });