マウスオーバー時に画像を拡大する方法
ゆっくり拡大、ゆっくり縮小

素早く拡大、素早く縮小

透明化

今回はマウスオーバー時に画像を拡大させる方法を紹介します。またWordPressの無料人気テーマ「Cocoon」にそのまま適用することができるスタイルシート(CSS)も紹介します。
スポンサーリンク
ゆっくり拡大し、ゆっくり戻る

[マウスオーバーしてみてください]
上記画像のサンプルのようにマウスオーバー時に"ゆっくり拡大"し、マウスアウト時に"ゆっくり戻り"ます。
スタイルシートは以下の通り。
/** 画像開始 **/ .card-thumb { overflow: hidden; } .card-thumb img { transition: all .6s ease-out 0.1s; } .card-thumb img:hover { transform: scale(1.1); transition: all .6s ease-out 0.1s; } /** 画像終了 **/
「card-thumb img」の「transition: all .6s」が画像を縮小するのにかかる時間。「.card-thumb img:hover」の「transition: all .6s」が画像を拡大するのにかかる時間。上記のスタイルシートでは画像の拡大と縮小に0.6秒かけるように設定します。
すばやく拡大し、すばやく戻る

[マウスオーバーしてみてください]
上記画像のサンプルのようにマウスオーバー時に"すばやく拡大"し、マウスアウト時に"すばやく戻り"ます。
スタイルシートは以下の通り。
/** 画像開始 **/ .card-thumb { overflow: hidden; } .card-thumb img { transition: all .1s ease-out 0.1s; } .card-thumb img:hover { transform: scale(1.1); transition: all .1s ease-out 0.1s; } /** 画像終了 **/
「card-thumb img」の「transition: all .1s」が画像を縮小するのにかかる時間。「.card-thumb img:hover」の「transition: all .1s」が画像を拡大するのにかかる時間。上記のスタイルシートでは画像の拡大と縮小に0.1秒かけるように設定します。

transition: allの時間をお好みの値に変更してお使いください。
スポンサーリンク
マウスオーバー時に画像を少し透明にする

[マウスオーバーしてみてください]
画像を拡大するのとは違い、マウスオーバー時に画像を少し透明にする方法も紹介します。
スタイルシートは以下の通り。
/** 画像開始 **/ .card-thumb img:hover { opacity: 0.7; } /** 画像終了 **/
まとめ
本記事ではマウスオーバー時に画像を拡大させる方法を紹介しました。またWordPressの無料人気テーマ「Cocoon」にそのまま適用することができるスタイルシート(CSS)も紹介しました。
画像マウスオーバー時のデザインを少し工夫するだけで、イメージがだいぶ変わります。
是非、お試しください。

紹介したスタイルシート(CSS)はご自由にお使いください。
helpful
この記事は役に立ちましたか?