POSTED | 2022.01.07

【コピペ可】cssで作る簡単なhoverのアイデア・画像編

WWEBのこと

WRITER : Sasayama Sayaka

美術館と日本酒が大好きなクリエイター

プロフィールを見る

マウスカーソルを合わせた時に発生するアニメーションなどの変化の表現を「hover（ホバー）」と言いますが、現在のサイトではおしゃれなものから「おっ！」と驚くものまで、様々なhover表現がありますね。

色が変化したり画像が変化したりと、これらのアニメーションの多くは現在cssだけで表現できます。

今回はcssだけで表現できる様々な画像のhoverアニメーションアイデアをご紹介します。

▼cssだけで表現できる様々なボタンのhoverアニメーションアイデアについてはこちら

【コピペ可】cssで作る簡単なhoverのアイデア・ボタン編

また、紹介するコードはコピー可能です。
コピペして利用したり、適宜調整などしてご利用ください。

※スマホ操作時はhoverが正常に機能しないので、文字を表示させる表現などは適宜別の表現で表示されるよう対応が必要となります。
また、スマホから閲覧しているユーザーの方は今回正しい動作でご覧いただくことができないのでパソコンからの閲覧を推奨します。

画像の色が変わるhoverのアイデア

モノクロからカラー

See the Pen <a href="https://codepen.io/sasayama/pen/GRMGgMz"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
「filter」プロパティでグレースケールを100%にしておきます。hoverでfilterを初期状態へ戻します。
（反対にカラーからモノクロにすることも可能）

filterプロパティとは

画像の彩度、明度などを簡単に変更可能なcssプロパティです。
画像の色味の変更の他にはぼかし、ドロップシャドウなども可能です。

角度の変化とズーム

See the Pen <a href="https://codepen.io/sasayama/pen/BawVyJX"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
transformプロパティでhover時に画像のズームと角度の変更を行っています。

ぼかし

See the Pen <a href="https://codepen.io/sasayama/pen/mdBKyXv"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
「filter」プロパティでぼかしていた画像をhoverで初期状態に戻します。

ぼかし+セピア

See the Pen <a href="https://codepen.io/sasayama/pen/MWEXYVb"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
「filter」プロパティでセピアを100%にしてぼかしていた画像をhoverで初期状態に戻します。

背景色と重ねる①

See the Pen <a href="https://codepen.io/sasayama/pen/QWqxwxy"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
hoverで画像を透過させることで背景色をうっすら見せます。

背景色と重ねる②

See the Pen <a href="https://codepen.io/sasayama/pen/PoJawar"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
画像に「mix-blend-mode」プロパティでスクリーン（screen）を設定して背景色と重ねる表現です。
①と似ていますが、mix-blend-modeプロパティを使えば設定次第でオーバーレイや乗算などの表現も可能です。

mix-blend-modeプロパティとは

要素に対して「オーバーレイ」「乗算」などを付与できるプロパティです。
PhotoshopやIllustratorにあるレイヤーを「オーバーレイ」等で重ねた時の見え方の設定と同様の使い方ができます。

ぼかし+色味変化

See the Pen <a href="https://codepen.io/sasayama/pen/xxXzbJW"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
「filter」プロパティで画像をぼかし、疑似要素を使いグラデーションカラーを「mix-blend-mode」プロパティでスクリーン（screen）にしつつ画像の上に配置しています。hoverでは上記設定を非表示、または初期化しています。

画像に文字が表示されるhoverのアイデア

画像の全体が暗くなる

See the Pen <a href="https://codepen.io/sasayama/pen/MWEXYRo"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
画像を暗くするのは「filter」を使用。hoverで明度（brightness）を調整しています。

画像にグラデーションがかかる

See the Pen <a href="https://codepen.io/sasayama/pen/eYGKmaG"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
「mix-blend-mode」プロパティで画像にソフトライト（soft-light）のグラデーションをかけています。優しい色味の雰囲気に。

画像にグラデーション＋画像がスライド

See the Pen <a href="https://codepen.io/sasayama/pen/xxXzbvJ"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
hoverした時にスライドさせる余裕を持たせるため、初めから画像を少し拡大させています。

ぼかし

See the Pen <a href="https://codepen.io/sasayama/pen/poWKJzP"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
ただぼかすだけでは文字が見えにくい可能性があったので、変化と同時にほんの少し画像自体を透過させています。（お好みで）

セピアに変化

See the Pen <a href="https://codepen.io/sasayama/pen/GRMGJRK"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
ただセピアに変化させるだけでは文字が見えにくい可能性があったので、変化と同時にほんの少し画像自体を透過させています。（お好みで）

カードを裏返すような動き

See the Pen <a href="https://codepen.io/sasayama/pen/eYGKNmy"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
要素を回転させるので、裏面（文字を表示させている部分）は最初から反転させておくと文字が反対にならずにすみます。

下から出てくる

See the Pen <a href="https://codepen.io/sasayama/pen/NWazqqR"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>.

画像の全体が暗くなる+枠

See the Pen <a href="https://codepen.io/sasayama/pen/vYerOOq"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>.

画像の全体が暗くなる+枠+写真がズームする

See the Pen <a href="https://codepen.io/sasayama/pen/MWEXwaE"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>.

画像の色変化+枠

See the Pen <a href="https://codepen.io/sasayama/pen/dyVKoYL"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>.

シャッターでグラデーションがかかる

See the Pen <a href="https://codepen.io/sasayama/pen/KKXepzq"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
「before」「after」の疑似要素を利用してhover時に画像にシャッターのようにグラデーションがかかるようにしています。
疑似要素を同時ではなく時間差でそれぞれ動かすため、遅延には「transition-delay」を利用しています。

シャッター+ズーム+ぼかし

See the Pen <a href="https://codepen.io/sasayama/pen/PoJaqzP"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
シャッターなどの疑似要素は画像より大きめのサイズに作成します。
そのままだとはみ出した部分が邪魔になるので、「overflow: hidden;」で不要な部分は隠します。

画像が別の画像に切り替わるhoverのアイデア

カードを裏返すような動き

See the Pen <a href="https://codepen.io/sasayama/pen/wvrXazz"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
「画像に文字が表示されるhoverのアイデア」のテキスト部分を画像に変更した形です。

スライド（横）

See the Pen <a href="https://codepen.io/sasayama/pen/wvrXaoz"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
画像を横並びにして、hover時にスライドで移動させています。
画像を覆うクラス内で範囲外を表示しないように指定することで見える範囲を限定し、その範囲内でスライドさせることで画像が切り替わって見えます。

スライド（縦

）
 See the Pen <a href="https://codepen.io/sasayama/pen/gOGKpga"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
スライド（横）の縦版です。

ふわっと切り替わる

See the Pen <a href="https://codepen.io/sasayama/pen/xxXzGgm"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
画像を二枚重ねて並べ、hoverで一枚目の画像を非表示にして二枚目を表示させています。

ふわっと切り替わる（ズーム）

See the Pen <a href="https://codepen.io/sasayama/pen/BawVNWL"> Untitled</a> by sasayama (<a href="https://codepen.io/sasayama">@sasayama</a>) on <a href="https://codepen.io">CodePen</a>. 
cssのポイント
上記で切り替え時に一枚目の画像をズームさせています。少し動きを足すだけでも変化の印象が変わりますね。