【CSS】マウスオーバーで画像を拡大！
2020年10月12日 配信
マウスオーバーで画像が拡大します。ダイナミックな動きのあるリッチコンテンツのように見せることができます。簡単に実装出来ます。
今回はこの画像を使います。
HTMLはこちら
要素を準備します。その中に画像のタグを表記します。
そのままコピーして使えます。
<div class="big">
<img src="https://www.iotoon.com/wp-content/uploads/2020/10/CSSLOGO02.png" />
</div>CSSはこちら
クラス（.big）で400pxの表示の枠を作ってます。
つぎのクラス（.big img）で画像の幅400px指定。displayでブロック要素指定。transitionに0.5sを設定することにより、0.5秒でtransform:scaleで指定する最大の大きさまで画像が拡大されます。
次のクラス（.big img:hover）のtransform:scale(横、縦)で「縦」「横」の拡大比率を指定しています。例は3倍です。マウスオーバーで画像が拡大できるようにhoverを指定しています。
HTMLと合わせてそのままコピーして使えます。
.big {
overflow: hidden;
width: 400px;
height: auto;
}
.big img {
width: 400px;
display: block;
transition: 0.5s;
}
.big img:hover {
transform: scale(3.0, 3.0);
}ＤＥＭＯ
ソースコード右上の再生ボタンで表示を確認できます。
<style type="text/css">
.big {
overflow: hidden;
width: 400px;
height: auto;
}
.big img {
width: 400px;
display: block;
transition: 0.5s;
}
.big img:hover {
transform: scale(2.0, 2.0);
}
</style>
<div class="big">
<img src="https://www.iotoon.com/wp-content/uploads/2020/10/CSSLOGO02.png" />
</div>
まとめ
画像の拡大縮小は「transform：scale(横倍率、縦倍率)」で指定が出来ます。
画像の拡大縮小の他にも「回転」などの動きをつけることが可能です。
別な機会に紹介したいと思います。
コメント
0 件