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

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

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

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

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

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

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

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

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

モノクロからカラー

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
「filter」プロパティでグレースケールを100%にしておきます。hoverでfilterを初期状態へ戻します。
（反対にカラーからモノクロにすることも可能）

filterプロパティとは

角度の変化とズーム

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
transformプロパティでhover時に画像のズームと角度の変更を行っています。

ぼかし

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
「filter」プロパティでぼかしていた画像をhoverで初期状態に戻します。

ぼかし+セピア

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
「filter」プロパティでセピアを100%にしてぼかしていた画像をhoverで初期状態に戻します。

背景色と重ねる①

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
hoverで画像を透過させることで背景色をうっすら見せます。

背景色と重ねる②

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
画像に「mix-blend-mode」プロパティでスクリーン（screen）を設定して背景色と重ねる表現です。
①と似ていますが、mix-blend-modeプロパティを使えば設定次第でオーバーレイや乗算などの表現も可能です。

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

ぼかし+色味変化

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
「filter」プロパティで画像をぼかし、疑似要素を使いグラデーションカラーを「mix-blend-mode」プロパティでスクリーン（screen）にしつつ画像の上に配置しています。hoverでは上記設定を非表示、または初期化しています。

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

画像の全体が暗くなる

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

画像を暗くするのは「filter」を使用。hoverで明度（brightness）を調整しています。

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

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
「mix-blend-mode」プロパティで画像にソフトライト（soft-light）のグラデーションをかけています。優しい色味の雰囲気に。

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

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
hoverした時にスライドさせる余裕を持たせるため、初めから画像を少し拡大させています。

ぼかし

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
ただぼかすだけでは文字が見えにくい可能性があったので、変化と同時にほんの少し画像自体を透過させています。（お好みで）

セピアに変化

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
ただセピアに変化させるだけでは文字が見えにくい可能性があったので、変化と同時にほんの少し画像自体を透過させています。（お好みで）

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

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
要素を回転させるので、裏面（文字を表示させている部分）は最初から反転させておくと文字が反対にならずにすみます。

下から出てくる

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

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

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

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

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

画像の色変化+枠

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

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

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
「before」「after」の疑似要素を利用してhover時に画像にシャッターのようにグラデーションがかかるようにしています。
疑似要素を同時ではなく時間差でそれぞれ動かすため、遅延には「transition-delay」を利用しています。

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

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
シャッターなどの疑似要素は画像より大きめのサイズに作成します。
そのままだとはみ出した部分が邪魔になるので、「overflow: hidden;」で不要な部分は隠します。

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

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

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
「画像に文字が表示されるhoverのアイデア」のテキスト部分を画像に変更した形です。

スライド（横）

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
画像を横並びにして、hover時にスライドで移動させています。
画像を覆うクラス内で範囲外を表示しないように指定することで見える範囲を限定し、その範囲内でスライドさせることで画像が切り替わって見えます。

スライド（縦

）

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
スライド（横）の縦版です。

ふわっと切り替わる

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
画像を二枚重ねて並べ、hoverで一枚目の画像を非表示にして二枚目を表示させています。

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

See the Pen
Untitled by sasayama (@sasayama)
on CodePen.

cssのポイント
上記で切り替え時に一枚目の画像をズームさせています。少し動きを足すだけでも変化の印象が変わりますね。

おわりに

今や簡単なCSSだけで幅広い表現ができるアニメーション。
IE11のサポートが2022年6月15日に終了となり、マイクロソフトもIE11からedgeに切り替えを推奨しているため、IE11では対応していなかった「filter」などのcssプロパティも気兼ねなく利用できるようになりました。（※）

cssと合わせてJavaScriptも利用するとさらに高度なアニメーションの表現も可能です。
様々なアニメーションでユーザーを驚かせることを追求してみるのも楽しいかもしれませんね。

※アプリコットデザインではIE11を制作時の動作保証対象外とさせていただいております。

/wp2023/disclaimer/

また、まみさんの「Web制作時のターゲットブラウザを改定」の記事もぜひご覧ください。

/journal/target-browser/