Zoom on hover

Zoom into another image size on hover of original image

by someprimetime

HTML

<div class="js-hover-zoom" id="bounded_box">
<div class="js-orig-img">
<img src="http://dy6g3i6a1660s.cloudfront.net/1j6RXGFolXu6abqBrv70sgMgAyA/lb-e8/sugarpill-cosmetics-4-color-palette.jpg" width="520" height="520" />
</div>

<div class="js-large-img">
<div class="js-large-img-inner">
<img src="http://dy6g3i6a1660s.cloudfront.net/1j6RXGFolXu6abqBrv70sgMgAyA/orig-e8/sugarpill-cosmetics-4-color-palette.jpg" />
</div>
</div>
</div>

CSS

.js-hover-zoom {
    position: relative;
}

.js-orig-img {
width: 520px;
height: 520px;
float: left;
}

.js-cursor-orig-overlay {
    background: #000;
    opacity: .5;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
}

.js-cursor-zoom-box {
display: none;
background: #fff;
opacity: 0.5;
border: 1px solid #606060;
position: absolute;
float: left;
width: 200px;
height: 200px;
cursor: move;
}

.js-large-img {
background: #fff;
width: 440px;
height: 100%;
position: relative;
float:left;
display: none;
overflow:hidden;
}

.js-large-img-inner {
position: absolute;
}

#bounded_box {
width: 960px;
height: 553px;
}

JavaScript

(function($) {
    var methods = {
        init: function(options) {
            var settings = $.extend({
                'largeImg': ''
            }, options);

            return this.each(function() {
                var $container = $(this);
                var $div = $('<div />');

                var $origImg = $('.js-orig-img');
                var $largeImg = $('.js-large-img');
                var $largeImgInner = $largeImg.find('.js-large-img-inner');
                var $origOffset = $origImg.offset();
                
                $largeImg.after($div.addClass('js-cursor-zoom-box'));

                var $zoomBox = $('.js-cursor-zoom-box');

                var hovered = false;

                $origImg.mouseenter(function() {
                    $('.js-orig-img').css('background-color', '#000');
                    hovered = true;
                    $zoomBox.fadeIn();
                    $largeImg.fadeIn();
                });

                $zoomBox.mouseleave(function() {
                    hovered = false;
                    $zoomBox.fadeOut();
                    $('.js-cursor-orig-overlay').remove();
                    $largeImg.fadeOut();
                });
                
                $('.js-orig-img').mouseenter(function() {
                    var $overlay = $('<div />').addClass('js-cursor-orig-overlay');
                    $(this).prepend($overlay);
                }).mouseleave(function() {
                });

                $(document).bind('mousemove', function(e) {
                    if (!hovered) {
                        return;
                    }
                    var relX = e.pageX - $origOffset.left; // x coordinate relative to .js-orig-img
                    var relY = e.pageY - $origOffset.top; // y coordinate relative to .js-orig-img
                    
                    $largeImgInner.css({
                        left: $zoomBox.position().left - $zoomBox.position().left * 2,
                      ...