CSS マウスオーバーで拡大する画像の作り方

マウスを画像に重ねたときに、画像が拡大するCSSの作り方を紹介。

See the Pen
image-zoom-hover
by kura (@kuranopen)
on CodePen.

HTML


<figure class="hover-zoom"><img class="zoom" src="https://picsum.photos/id/627/1024/1024"></figure>

  • 対象のclassにhover-zoomを指定します
  • 対象の子要素のclassにzoomを指定します

CSS


.hover-zoom {
  overflow: hidden;
  display: block;
}
.hover-zoom > .zoom {
  display: block;
  width: 100%;
  height: auto;
  transition: all, 0.5s;
}
.hover-zoom:hover > .zoom {
  transform: scale(1.2);
}

  • .hover-zoom 画像がはみ出ないようにoverflow: hidden;を指定
  • .hover-zoom > .zoom アニメーションの指定と画像の大きさを指定
  • .hover-zoom:hover > .zoom 画像の拡大率をtransform: scale()から指定できます。
  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいデザイナーです。 趣味でアプリ開発(ペア、デザイン担当)やNuxt.jsやらをいじってますが、やばいな~と感じつつネットの波に取り残されないようにワカッタこと、キヅイタことをカキカキします。