はじめに

画像にマウスをおいた時に、ズームするような物を作りたいのですが、どうしたらいいですか？

画像にマウスをおいた時にズームするような物を作るときは、まずhoverした時に　画像の倍率を変えるようにします。

なるほど・・確かにzoomしてるというより大きくなっていると考えたほうがいいですね。

そうですね。そのあと枠の大きさを決めておいて、そこからはみ出たものを非表示にすることで、画像をhoverした時にzoomしたように見えるようになるかと思います。

確かに・・・大きくなった画像を同じ大きさの窓から見るとズームしたように見えますね。

そうですね。では、作成段階をサンプルにまとめましたので、ご覧ください。

cssで画像をhoverした時にzoomさせてみよう

画像をhoverした時に、単純に大きくした場合は、次のようなコードになります。

cssで画像をhoverした時にtrasform:scaleで大きくします

<div class="sample_box">>img src="画像のURLが入ります。"></div>

.sample_box{
 width:300px; // サイズがサンプルなので適時変更してください。
 margin:0 auto; //サンプルで中央に寄せたいので書かせていただいております。
}
.sample_box img:hover{
  transform:scale(1.2,1.2);
}

cssで画像をhoverした時に単純にzoomさせた時のサンプル

上記のように.sample_boxの大きさを超えて画像が大きくなっていることが確認できるかと思います。
HTMLはこのままの状態で、はみ出た部分を非表示にするようにすることで、枠内でズームすることができるようになります。

cssで画像がzoomした時にはみ出た部分を非表示にしてみよう

上記のcssの.sample_boxに１行追加させます。

.sample_box{
 width:300px; // サイズがサンプルなので適時変更してください。
 margin:0 auto; //サンプルで中央に寄せたいので書かせていただいております。
 overflow:hidden; //これを記述することではみ出た部分を非表示にします。
}

cssで画像がzoomした時にはみ出た部分を非表示にした時のサンプル

上記のサンプルのように300px内でzoomするようになります。
これでhoverした時に画像がzoomして見えるようになりました。
あとは、上記のコードに、以下のように変化する時間を記述することで、よりアニメーションらしくなります。

.sample_box{
 width:300px; // サイズがサンプルなので適時変更してください。
 margin:0 auto; //サンプルで中央に寄せたいので書かせていただいております。
 overflow:hidden; //これを記述することではみ出た部分を非表示にします。
}
.sample_box img{
 transition:1s all;
}
.sample_box img:hover{
  transform:scale(1.2,1.2);
  transition:1s all;
}

これで、アニメーションらしくhover時にzoomするようになったかと思います。