秀逸なアイデアが素晴らしい！CSS3を使ったホバーエフェクトのまとめ

画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。

Original Hover Effects with CSS3
デモページ

10種類のエフェクトで、見出しやテキストを気持ちいいアニメーションで表示します。

CSS3 Hover Effects
デモページ

オーバーレイのかっこいい5種類のエフェクト。

Circle Hover Effects with CSS Transitions
デモページ

円形ならではの面白いアニメーションを使った7種類のエフェクト。

Fancy Hover Effects with CSS3 Transitions
デモページ

シンプルだけどファンシーなアニメーションのエフェクト。

Slide In Image Boxes
デモページ

背景画像をアニメーションでスライドし、背景とテキストのカラーを変更します。

Jumping Featured Boxes
デモページ

パネルがフラッシュし、天地から画像とテキストがスライドします。

Sexy Image Hover Effects using CSS3
デモページ

画像をアニメーションで拡大し、マスクを除きます。

CSS :hover 'shine effect' (ver 3)

ボタンをホバーすると、きらっと光ります。

デモページ

パネルをホバーすると、きらっと光ります。こちらは画像を使うタイプ。

5 Cool CSS Hover Effects You Can Copy and Paste
Demo 1, 2, 3, 4, 5

ふわっと浮かんだり、横にテキストがフェードインしたりなど、5つのホバーエフェクト。

Multi-direction hover

ホバーの方向で変化するカラーが異なります。

CSS3 Spinning Social Media Icons
デモページ

アイコンをアニメーションでくるっと回転させます。

3D Thumbnail Hover Effects
デモページ

蛇腹のように折りたたんだり、雑誌のようにめくれます。
with jQuery