【コピペOK】jQueryのみで画像拡大機能を作る方法

<p class="zoom__img"><img src="img01.jpg"></p>

/* 親要素からはみ出た部分は overflow: hidden で隠す*/
.zoom__img {
    overflow: hidden;
}
/* transitionでscaleとobuject-positonをアニメーション */
.zoom__img img {
    transition: transform .3s ,object-position .3s;
    width: 100%;
    height: auto;
    display: block;
}
/* hover時に画像を拡大 */
.zoom__img:hover img {
    transform: scale(2);
    position: relative;
}

$(function () {

  let clientRect //画像の位置
  let w;         //画像の幅
  let h;         //画像の高さ
  let xx;        //画像上のマウスカーソルの位置　横
  let yy;        //画像上のマウスカーソルの位置　縦
  let x;         //最終的に算出した値　横
  let y;         //最終的に算出した値　縦

  //画像の上にマウスが来たら処理開始
  $(".zoom__img").mousemove(function (e) {

    // 画像の位置を取得
    clientRect = this.getBoundingClientRect() ;
    w = this.getBoundingClientRect().width;
    h = this.getBoundingClientRect().height;

    //画像の左上から、どこにカーソルがあるかを取得
    xx = e.pageX - (clientRect.left + window.pageXOffset) ;
    yy = e.pageY - (clientRect.top + window.pageYOffset) ;

    //なんやかんやいじくりまわして、object-positionの値を取得する
    x  = ((w/2) - xx) / 2;
    y  = ((h/2) - yy) / 2;

    //object-position に算出した値を設定
    $(this).find("img").css('object-position',x +"px "+y+"px");

  });

  //画像からマウスが離れたらリセット
  $(".zoom__img").mouseout(function (e) {
    $(this).find("img").css("object-position",0,0);
  });

});