UPDATE：2022.1.7
- CATEGORY
- ホームページのこと
【コピペ可】cssで作る簡単なhoverのアイデア・画像編
マウスカーソルを合わせた時に発生するアニメーションなどの変化の表現を「hover（ホバー）」と言いますが、現在のサイトではおしゃれなものから「おっ！」と驚くものまで、様々なhover表現がありますね。色が変化したり画像が変化したりと、これらのアニメーションの多くは現在cssだけで表現できます。
今回はcssだけで表現できる様々な画像のhoverアニメーションアイデアをご紹介します。
▼cssだけで表現できる様々なボタンのhoverアニメーションアイデアについてはこちら
【コピペ可】cssで作る簡単なhoverのアイデア・ボタン編
また、紹介するコードはコピー可能です。
コピペして利用したり、適宜調整などしてご利用ください。
※スマホ操作時はhoverが正常に機能しないので、文字を表示させる表現などは適宜別の表現で表示されるよう対応が必要となります。
また、スマホから閲覧しているユーザーの方は今回正しい動作でご覧いただくことができないのでパソコンからの閲覧を推奨します。
画像の色が変わるhoverのアイデア
モノクロからカラー
cssのポイント
「filter」プロパティでグレースケールを100%にしておきます。hoverでfilterを初期状態へ戻します。
（反対にカラーからモノクロにすることも可能）
filterプロパティとは
角度の変化とズーム
cssのポイント
transformプロパティでhover時に画像のズームと角度の変更を行っています。
ぼかし
cssのポイント
「filter」プロパティでぼかしていた画像をhoverで初期状態に戻します。
ぼかし+セピア
cssのポイント
「filter」プロパティでセピアを100%にしてぼかしていた画像をhoverで初期状態に戻します。
背景色と重ねる①
cssのポイント
hoverで画像を透過させることで背景色をうっすら見せます。
背景色と重ねる②
cssのポイント
画像に「mix-blend-mode」プロパティでスクリーン（screen）を設定して背景色と重ねる表現です。
①と似ていますが、mix-blend-modeプロパティを使えば設定次第でオーバーレイや乗算などの表現も可能です。
mix-blend-modeプロパティとは
要素に対して「オーバーレイ」「乗算」などを付与できるプロパティです。
PhotoshopやIllustratorにあるレイヤーを「オーバーレイ」等で重ねた時の見え方の設定と同様の使い方ができます。
PhotoshopやIllustratorにあるレイヤーを「オーバーレイ」等で重ねた時の見え方の設定と同様の使い方ができます。
ぼかし+色味変化
cssのポイント
「filter」プロパティで画像をぼかし、疑似要素を使いグラデーションカラーを「mix-blend-mode」プロパティでスクリーン（screen）にしつつ画像の上に配置しています。hoverでは上記設定を非表示、または初期化しています。
画像に文字が表示されるhoverのアイデア
画像の全体が暗くなる
画像を暗くするのは「filter」を使用。hoverで明度（brightness）を調整しています。
画像にグラデーションがかかる
cssのポイント
「mix-blend-mode」プロパティで画像にソフトライト（soft-light）のグラデーションをかけています。優しい色味の雰囲気に。
画像にグラデーション＋画像がスライド
cssのポイント
hoverした時にスライドさせる余裕を持たせるため、初めから画像を少し拡大させています。
ぼかし
cssのポイント
ただぼかすだけでは文字が見えにくい可能性があったので、変化と同時にほんの少し画像自体を透過させています。（お好みで）
セピアに変化
cssのポイント
ただセピアに変化させるだけでは文字が見えにくい可能性があったので、変化と同時にほんの少し画像自体を透過させています。（お好みで）
カードを裏返すような動き
cssのポイント
要素を回転させるので、裏面（文字を表示させている部分）は最初から反転させておくと文字が反対にならずにすみます。
下から出てくる
画像の全体が暗くなる+枠
画像の全体が暗くなる+枠+写真がズームする
画像の色変化+枠
シャッターでグラデーションがかかる
cssのポイント
「before」「after」の疑似要素を利用してhover時に画像にシャッターのようにグラデーションがかかるようにしています。
疑似要素を同時ではなく時間差でそれぞれ動かすため、遅延には「transition-delay」を利用しています。
シャッター+ズーム+ぼかし
cssのポイント
シャッターなどの疑似要素は画像より大きめのサイズに作成します。
そのままだとはみ出した部分が邪魔になるので、「overflow: hidden;」で不要な部分は隠します。
画像が別の画像に切り替わるhoverのアイデア
カードを裏返すような動き
cssのポイント
「画像に文字が表示されるhoverのアイデア」のテキスト部分を画像に変更した形です。
スライド（横）
cssのポイント
画像を横並びにして、hover時にスライドで移動させています。
画像を覆うクラス内で範囲外を表示しないように指定することで見える範囲を限定し、その範囲内でスライドさせることで画像が切り替わって見えます。
スライド（縦
）cssのポイント
スライド（横）の縦版です。
ふわっと切り替わる
cssのポイント
画像を二枚重ねて並べ、hoverで一枚目の画像を非表示にして二枚目を表示させています。
ふわっと切り替わる（ズーム）
cssのポイント
上記で切り替え時に一枚目の画像をズームさせています。少し動きを足すだけでも変化の印象が変わりますね。
おわりに
今や簡単なCSSだけで幅広い表現ができるアニメーション。IE11のサポートが2022年6月15日に終了となり、マイクロソフトもIE11からedgeに切り替えを推奨しているため、IE11では対応していなかった「filter」などのcssプロパティも気兼ねなく利用できるようになりました。（※）
cssと合わせてJavaScriptも利用するとさらに高度なアニメーションの表現も可能です。
様々なアニメーションでユーザーを驚かせることを追求してみるのも楽しいかもしれませんね。
※アプリコットデザインではIE11を制作時の動作保証対象外とさせていただいております。
http://apricot-design.com/wp2023/disclaimer/
また、まみさんの「Web制作時のターゲットブラウザを改定」の記事もぜひご覧ください。
Web制作時のターゲットブラウザを改定
画像の色味の変更の他にはぼかし、ドロップシャドウなども可能です。