画像にマウスをおいた時に、ズームするような物を作りたいのですが、どうしたらいいですか？
画像にマウスをおいた時にズームするような物を作るときは、まずhoverした時に 画像の倍率を変えるようにします。
なるほど・・確かにzoomしてるというより大きくなっていると考えたほうがいいですね。
そうですね。そのあと枠の大きさを決めておいて、そこからはみ出たものを非表示にすることで、画像をhoverした時にzoomしたように見えるようになるかと思います。
確かに・・・大きくなった画像を同じ大きさの窓から見るとズームしたように見えますね。
そうですね。では、作成段階をサンプルにまとめましたので、ご覧ください。
cssで画像をhoverした時にzoomさせてみよう
<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);
}
上記のように.sample_boxの大きさを超えて画像が大きくなっていることが確認できるかと思います。
HTMLはこのままの状態で、はみ出た部分を非表示にするようにすることで、枠内でズームすることができるようになります。
上記のcssの.sample_boxに１行追加させます。
.sample_box{
width:300px; // サイズがサンプルなので適時変更してください。
margin:0 auto; //サンプルで中央に寄せたいので書かせていただいております。
overflow:hidden; //これを記述することではみ出た部分を非表示にします。
}上記のサンプルのように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するようになったかと思います。