我试图使一个WordPress网站的自定义缩放功能。缩放功能的工作，但我无法使它跟随我的鼠标-放大对光标。
我所使用的方法是相当冗长的，所以我希望从一个简单的问题开始。

CSS

写了一个小片段，将填充其父对象，并允许我应用缩放样式-在mouseover / out的jQuery中应用。
一件事要注意，我试图想到一个工作周围的是背景大小：封面。这可以防止图像滑出的位置-但我觉得不能使用，如果我想调整的位置？
下面是CSS：

.photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform .5s ease-out;
}

字符串

jQuery

我已经瞄准了我的锚，其中包含我希望缩放的图像。
已创建一个容器以包含缩放图像。
使用src设置背景图像。
将比例应用于鼠标悬停/鼠标移出。
现在，在鼠标移动时，我试着像这样设置变换原点和背景位置：

//transform-origin
.on('mousemove', function(e){
    $(this).children('.photo').css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
            console.log('transform-origin should adjust');
})
//background-position
.on('mousemove', function(e){
    $(this).children('.photo').css({'background-position': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
    console.log('background-position should adjust');
})

型
这没有效果，也不知道为什么-它和其他函数（控制台日志工作）一样是$（this）.children（'. photo'），当我通过它工作时，数学是合乎逻辑的，应该会产生正确的数字。
我想我的问题是为什么这不能缩放到图像的正确区域？有没有办法解决背景尺寸：封面？
我现在要建一个jsfiddle什么的。