CSSを使用して画像をホバーしたときに拡大する方法

方法1: transformプロパティを使用する方法

.img-container {
  position: relative;
  display: inline-block;
}
.img-container img {
  transition: transform 0.3s ease;
}
.img-container:hover img {
  transform: scale(1.2);
}

上記のコードでは、画像を包むコンテナに.img-containerクラスを指定し、コンテナ内の画像に.img-container imgセレクタを使用します。ホバーしたときに画像を拡大するために、transformプロパティを使用してscale(1.2)（拡大率）を指定します。transitionプロパティを使用することで、拡大アニメーションをスムーズにすることができます。

方法2: background-sizeプロパティを使用する方法

.img-container {
  background-image: url('path/to/image.jpg');
  background-size: 100% 100%;
  transition: background-size 0.3s ease;
  display: inline-block;
}
.img-container:hover {
  background-size: 120% 120%;
}

上記のコードでは、画像を背景画像としてコンテナに設定し、background-sizeプロパティを使用して画像のサイズを調整します。ホバー時にbackground-sizeを変更することで、画像を拡大します。

これらの方法を使用することで、画像をホバーしたときに簡単に拡大することができます。適用したい方法を選んで実装してみてください。