Inside the container should be an image larger than its size. We need a mechanism for moving the image by hovering the mouse within the container in order to see the part of the picture hiding. The container has an overflow: hidden property; (Brought to the right side of the container - we saw the right side of the image). Everything should work without jumps.

here is the markup + styles.

.container { width: 300px; height: 300px; overflow: hidden; } 
 <div class="container"> <img src="http://foto-babochek.ru/images/risunok-babochki_25.jpg" alt=""> </div>

It is necessary to smoothly change the coordinates of the image inside the <div class="container"> depending on the location of the mouse pointer on the container. That is, when you hover on the upper left edge, you can see the upper left edge of the picture.

1 answer 1

border is needed so that the edges of the image can be seen with some margin.

 $( ".container" ).mousemove(function( event ) { var border = 50; var x=event.pageX-$(this).offset().left; var y=event.pageY-$(this).offset().top; var newx=(x/$(this).width())*($("img", this).width()-$(this).width()+2*border)-border; var newy=(y/$(this).height())*($("img", this).height()-$(this).height()+2*border)-border; $("img", this).css({left: -newx, top: -newy}); }); 
 .container { position:relative; width: 300px; height: 300px; overflow: hidden; } .container img { position:relative; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <img src="http://foto-babochek.ru/images/risunok-babochki_25.jpg" alt=""> </div>