Mousemove + translate3d?

Question

[GaserV]

Господа, подскажите пожалуйста. У меня в popup открывается большая картинка. Мне нужно, чтобы при ведении мыши по экрану изображение двигалось вверх\вниз в зависимости куда ведешь мышкой с точностью наоборот. То, что набросал, прикрепил, но у меня проблемки с матаном поэтому думаю написал шлак. Проблема в том, что нужно как-то оцентрировать это самое изображение по центру экрана и после передвижения мышки двигать его. Пример того, что нужно: https://www.net-a-porter.com/ru/en/product/637841

То, что есть сейчас:

$('.zoom').on('click',function(e){
    	e.preventDefault();
    	
    	var image = $(this).attr('href');

    	$('body').append('<div class="full-image-wrap"><div class="close-modal " onclick="hideFullImage(this)"></div><div class="full-image-inner"><div class="full-image"><img src="' + image + '"></div></div></div>')
    
    	$('.full-image').mousemove(function(e){

    		var $that = $(this);

    		$('body').css("overflow","hidden");

	    	var pageY = e.pageY,
	    		imageHeight = $that.find('img').height(),
	    		docHeight = $(window).height(),
	    		cf = imageHeight / docHeight,
	    		posY =  cf * pageY / 2;

	    		console.log(posY);

	    	$(this).find('img').css({"transform": "translate3d(0px, -" + posY + "px, 0px)"});
	    })
    });

Answer 1

[magick]

codepen.io/magick/pen/oxRLYM