custom zoom effect using jquery (without js zoom plugins).

 <div class="wrapper">
                    <div class="zoom_area column">
                      <div class="preview">
                         <img class="img-responsive" src="images/Wallpaper.jpg" alt="">
                      </div>
                      <style>
                          .preview{float:left; width:100%;}
                        .magnifier {left: 0;position: absolute;top: 0;}
                        .zoom_area {overflow: hidden;}
                      </style>
                      <script>
                              (function($) {
                               $('.zoom_area').on('mouseenter', function() {
                                    var zoomUrl = $('.preview img').attr('src');
                                    $('.zoom_area').append('<div class="magnifier"><img src="' + zoomUrl + '"/></div>');
                                    $(this).find('.magnifier').fadeIn(250);
                                  }); 
                                  $('.zoom_area').on('mouseleave', function() {
                                    $(this).find('.magnifier').fadeOut(250, function() {
                                      $(this).remove();
                                    });
                                  });
                                  $('.zoom_area').mousemove(function(pointer) {/*computing coursor position on zoom area relating to original size of image*/
                                    var viewWidth = $(this).width(),
                                        viewHeight = $(this).height(),
                                        largeWidth = $(this).find('.magnifier').width(),
                                        largeHeight = $(this).find('.magnifier').height(),
                                        parentOffset = $(this).parent().offset(),
                                        relativeXPosition = (pointer.pageX - parentOffset.left),
                                        relativeYPosition = (pointer.pageY - parentOffset.top),
                                        moveX = Math.floor((relativeXPosition * (viewWidth - largeWidth) / viewWidth)),
                                        moveY = Math.floor((relativeYPosition * (viewHeight - largeHeight) / viewHeight));
                                    $(this).find('.magnifier').css({/*positioning original size image in zoom area*/
                                      left: moveX,
                                      top: moveY
                                    });
                                  });
                                })(jQuery);
                      </script>
                    </div>                   
                </div>