カードUIのホバー演出10パターン｜CSSだけで作れる動きのあるデザイン集

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webデザインで頻出する カードUI。
ニュース一覧、商品一覧、ポートフォリオ
どのサイトでも見かけるレイアウトですが、

「マウスオーバーした瞬間にどう見せるか」 で印象が大きく変わります。

ホバー演出はちょっとした動きでもユーザーの目を引き、サイトの「気持ちよさ」や「ブランド感」を高める大事なポイント。

そこで今回は、CSSだけで実現できるマウスオーバー演出10パターンをまとめました。

シンプルなフェードから、動きのある拡大・ぼかし・立体感まで、幅広いバリエーションを実装例付きで紹介します。

基本のカードHTML構造

まずはベースとなるカードのHTML。

<div class="card"> 
 <img src="https://picsum.photos/300/200" alt="サンプル画像">
 <h4>カードタイトル</h4>
 <p>カードの説明文がここに入ります。</p>
</div>

この構造を使い回しながら、CSSで10パターンの演出を作ります。

マウスオーバー演出 10パターン

1. ふんわり拡大

シンプルにカード全体を少し拡大するアニメーション。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

2. シャドウを強調

ホバー時に影を濃くして立体感を演出。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

3. 画像をズームイン

カード内の画像だけズームさせると、視線が自然に画像へ引き寄せられます。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

4. ぼかし＆テキスト浮き上がり

背景画像をぼかして、テキストを強調表示。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

5. グラデーションオーバーレイ

ホバー時にカラーグラデーションを重ねると、ブランド感UP。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

6. 上下スライドイン

テキストだけが下からスッと出てくる演出。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

7. フリップ（反転）

カードが回転して裏面に説明が出るUI。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

8. 枠線アニメーション

ホバー時に線がスーッと描かれるエフェクト。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

9. カラー反転

背景色とテキスト色を反転してインパクト演出。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

10. グロウエフェクト

光るようなボーダー効果で未来感を演出。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

まとめ

satokotadesignキャンペーン実施中！