CSSとJavaScriptで作る！画像の一部を“虫眼鏡風”に拡大するおしゃれなズームエフェクト

11月 7, 2025 11月 7, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

今回は、画像の一部を“虫眼鏡でのぞいたように拡大表示”できるおもしろいUI演出をご紹介します。

ECサイトの商品画像や、アート作品のディテールを見せたい時など、細部の魅力を伝えたいシーンにぴったり。
マウスを動かすと、拡大レンズが追従してズームされた部分をリアルタイムで見せる、インタラクティブな表現が可能です。

しかも、CSSと少しのJavaScriptだけで実現できます！

虫眼鏡風エフェクトの基本構造

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

まずはHTMLの基本構造から。
画像とレンズ用の要素を用意します。

<div class="magnifier-container">
  <img src="https://picsum.photos/id/1025/600/400" alt="sample" class="magnify-image">
  <div class="lens"></div>
</div>

次に、CSSで見た目を整えます。
レンズ部分を円形にして、拡大部分が見えるように設定します。

.magnifier-container {
  position: relative;
  display: inline-block;
}

.magnify-image {
  width: 300px;
  height: auto;
  border-radius: 10px;
}

.lens {
  background-size: 300%;
  position: absolute;
  border: 3px solid #fff;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  cursor: none;
  background-repeat: no-repeat;
  background-size: 200%;
  box-shadow: 0 0 10px rgba(255,255,255,0.4);
  display: none;
}

最後に、マウスの位置に合わせてレンズを動かすJavaScriptを追加します。

const container = document.querySelector('.magnifier-container');
const img = document.querySelector('.magnify-image');
const lens = document.querySelector('.lens');

container.addEventListener('mousemove', moveLens);
container.addEventListener('mouseenter', () => lens.style.display = 'block');
container.addEventListener('mouseleave', () => lens.style.display = 'none');

function moveLens(e) {
  const rect = container.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  const lensX = x - lens.offsetWidth / 2;
  const lensY = y - lens.offsetHeight / 2;

  lens.style.left = lensX + 'px';
  lens.style.top = lensY + 'px';
  lens.style.backgroundImage = `url(${img.src})`;
  lens.style.backgroundPosition = `-${x * 1.2 - lens.offsetWidth / 2}px -${y * 1.2 - lens.offsetHeight / 2}px`;
}

発展アレンジ：ズーム倍率を調整してリアルに

ズーム感をリアルに見せるには、CSSの
background-size
を変更して倍率をコントロールします。
たとえば、より強く拡大したい場合はこうです。


.lens {
  background-size: 500%;
}

また、レンズに軽いガラス反射のような表現を追加することで、より「虫眼鏡らしさ」が増します。


.lens::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(rgba(255,255,255,0.3), transparent 70%);
}

これで、まるで実際の虫眼鏡を動かしているかのような自然なビジュアルになります。

応用：クリックでズームを固定する

ユーザーがクリックするとズーム位置を固定するインタラクションも簡単に追加できます。


let locked = false;

container.addEventListener('click', () => {
  locked = !locked;
  lens.style.display = locked ? 'block' : 'none';
});

container.addEventListener('mousemove', (e) => {
  if (!locked) moveLens(e);
});

これで、クリックした位置で虫眼鏡が止まり、再度クリックすると解除されるようになります。
インタラクティブな画像閲覧体験として、ポートフォリオサイトや商品ページに使うととても効果的です。