広告 Cocoon

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

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

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

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

今回はマウスオーバー時に画像を拡大させる方法を紹介します。また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