ブログ

マウスオーバー時に画像を拡大させる方法（CSSあり）

2019年1月13日

マウスオーバー時に画像を拡大する方法

ゆっくり拡大、ゆっくり縮小

カスタマイズ
素早く拡大、素早く縮小
カスタマイズ
透明化
カスタマイズ

今回はマウスオーバー時に画像を拡大させる方法を紹介します。

スポンサーリンク

ゆっくり拡大し、ゆっくり戻る

カスタマイズ
[マウスオーバーしてみてください]
上記画像のサンプルのようにマウスオーバー時に"ゆっくり拡大"し、マウスアウト時に"ゆっくり戻り"ます。
<div class="img-card-thumb">
    <img src="画像のURL" />
</div>
スタイルシートは以下の通り。
.img-card-thumb {
    overflow: hidden;
}
.img-card-thumb img {
    transition: all .6s ease-out 0.1s;
}
.img-card-thumb img:hover {
    transform: scale(1.1);
    transition: all .6s ease-out 0.1s;
}

「.img-card-thumb img」の「transition: all .6s」が画像を縮小するのにかかる時間。「.img-card-thumb img:hover」の「transition: all .6s」が画像を拡大するのにかかる時間。上記のスタイルシートでは画像の拡大と縮小に0.6秒かけるように設定します。

すばやく拡大し、すばやく戻る

カスタマイズ
[マウスオーバーしてみてください]
<div class="img-card-thumb2">
    <img src="画像のURL" />
</div>
上記画像のサンプルのようにマウスオーバー時に"すばやく拡大"し、マウスアウト時に"すばやく戻り"ます。
スタイルシートは以下の通り。
.img-card-thumb2 {
    overflow: hidden;
}
.img-card-thumb2 img {
    transition: all .1s ease-out 0.1s;
}
.img-card-thumb2 img:hover {
    transform: scale(1.1);
    transition: all .1s ease-out 0.1s;
}

「img-card-thumb2 img」の「transition: all .1s」が画像を縮小するのにかかる時間。「.img-card-thumb2 img:hover」の「transition: all .1s」が画像を拡大するのにかかる時間。上記のスタイルシートでは画像の拡大と縮小に0.1秒かけるように設定します。

transition: allの時間をお好みの値に変更してお使いください。

スポンサーリンク

マウスオーバー時に画像を少し透明にする

カスタマイズ
[マウスオーバーしてみてください]
画像を拡大するのとは違い、マウスオーバー時に画像を少し透明にする方法も紹介します。
<div class="img-card-thumb3">
    <img src="画像のURL" />
</div>
スタイルシートは以下の通り。
.img-card-thumb3 img:hover {
    opacity: 0.7;
}

まとめ

本記事ではマウスオーバー時に画像を拡大させる方法を紹介しました。

画像マウスオーバー時のデザインを少し工夫するだけで、イメージがだいぶ変わります。

是非、お試しください。

紹介したスタイルシート（CSS）はご自由にお使いください。

helpful