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()から指定できます。

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選