カード型UIのクールなホバー実装例8選【CSS/JavaScript】

カード型UIは、商品一覧からブログ記事のフィードにまで活用できる、汎用性抜群のデザインです。

そんなカード型UIと相性がいいのが、マウスカーソルを合わせると変化が起きる「ホバーエフェクト」。見た目を魅力的にするだけでなく、UX向上にも役立ちます。

今回は、カード型UIにクールなホバーを実装した8つの事例をご紹介します。

1. 文字が飛び出すホバーエフェクト

シンプルなタイトルと背景画像で構成されたカード型UI。説明文とCTAがホバーで表示されます。CSSのみで作られているシンプルさも魅力です。

See the Pen Card Hover Interactions by Ryan Mulligan (@hexagoncircle) on CodePen.

2. 画像の一部が拡大するホバーエフェクト

カードにホバーすると、写真の一部が拡大され、名前とSNSのリンクが表示されます。情報をミニマルかつ魅力的に提示する好例です。CSSで作られています。

See the Pen Profile Card Hover Effect by P (@petegarvin1) on CodePen.

3. ホログラムが輝くホバーエフェクト

誰もがワクワクするような、ホログラム加工が施されたカード型UI。アニメーションGIFとグラデーションで作られたホログラムが、カードの魅力を引き立てています。制作に使われているのは、JavaScriptとCSSです。

See the Pen Pokemon Card Holo Effect by Simon Goellner (@simeydotme) on CodePen.

4. カードが上下にスライドするホバーエフェクト

グレースケールのカードにホバーすると、カラフルな色がつき、かつ上下にスライドして展開されます。ユーザーは、きっと目をとめるはずです。CSSのみで制作されています。

See the Pen CSS Card Hover Effects by Jhonier Riascos Zapata (@Jhonierpc) on CodePen.

5. カードが左右に開くホバーエフェクト

ボタンに近いスタイルのミニカードが、文章やCTAとともに展開し、動画が再生されます。小さなスペースに魅力を詰め込んだ、とても優秀なカード型UIです。CSSのみで制作されています。

See the Pen Holiday Feature Folding Cards [Pure CSS] by Madalena (@Maza-designDev) on CodePen.

6. 一部だけが反応するホバーエフェクト

カード全体ではなく、カード下部のタブにだけホバーエフェクトがついています。タブを使って1枚のカードに3倍のコンテンツを組み込んだ、とても賢いカード型UIです。グラスモーフィズムを採用しており、JavaScriptとCSSで作られています。

See the Pen Profile Card UI by JotForm (@jotform) on CodePen.

7. 色が広がるホバーエフェクト

ホバーすると色が広がり、情報が表示されます。クリーンでカラフル、そしてコンパクトなデザインです。CSSのみで制作されています。

See the Pen Player/User Cards by Alvaro Montoro (@alvaromontoro) on CodePen.

8. カードをピックアップするホバーエフェクト

重なり合ったカードにホバーすると、カードをピックアップできるスニペット。アクティブなカードには円形のアニメーションが表示されますが、これはテキストや画像に置き換えることも可能です。CSSのみで制作されています。

See the Pen CSS-Tricks Card Carousel by William Goldsworthy (@william-goldsworthy) on CodePen.

おわりに

ホバーエフェクトは、さまざまな要素にインタラクティブ性とちょっとした遊び心を与えられます。

目的や用途にあわせて、カード全体を大きく変化させるようなものから、カードの一部のみに対応するものまで、さまざまな形式でホバーエフェクトを適用してみましょう。

情報を効率的に整理するカード型UIと、機能性と遊び心を兼ね備えたホバーエフェクトを組み合わせれば、魅力的なUIを実装できるはずです。

（執筆：Eric Karkovack　翻訳：Asuka Nakajima　編集：少年B　提供元：speckyboy）