HTML/CSSで実装できる！今どきデザインのホバーエフェクト30個まとめ

ウェブサイトを魅力的に仕上げるだけでなく、ユーザーの注目を集めることができる、アニメーション・エフェクト。今回は、サイトコンテンツ表示に活用できる、HTML/CSSのみで実装できるホバーエフェクトをまとめています。

CSS3 を駆使したスタイリングは、コピペで利用することもでき、他と差のつくデザインエフェクトを、手軽に実現することができます。そのままコードを編集し、動作を確認することもできるので、今後のデザインプロジェクトに活用してみてはいかがでしょう。

詳細は以下から。

ウェブデザインを魅力的に仕上げる、HTML/CSSホバーエフェクトまとめ

HTML/CSS/JS をクリックすると、各コードやスタイリングを確認でき、Result で実際のエフェクトを試すことができます。Return をクリックすると、読み込みを再度行います。

マウスホバーで、タイトルをモザイク状に表示。

See the Pen #1382 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルとキャプションをレイヤー状に表示。

See the Pen #1384 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、文字テキストを切り替え。

See the Pen #1432 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルとキャプションをポップアップ表示。

See the Pen #1283 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルとキャプションをポップダウン表示。

See the Pen #1436 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

イメージにラインを加え、マウスホバーで写真をズームアップ。

See the Pen #1132 – Image bordered by title/caption by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、線ラインを伸縮表示。

See the Pen #1229 – Image with border title & caption by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、キャプションを線ライン伸縮付きで表示。

See the Pen #1200 – Image & title with caption on hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルをラインを交差させながら表示。

See the Pen #1445 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルとキャプションをライン付き表示。

See the Pen #1273 – Image hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、アイコンを回転させ表示。

See the Pen #1252 – Image hover with icon by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、アイコンからキャプションをスライド表示。

See the Pen #1141 – Image with corner icon by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、イメージ画像にゆっくりズームアップ。

See the Pen #1352 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、写真を右方向にパン。

See the Pen #1325 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、写真を下方向にパン。

See the Pen #1263 – Image hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルとアイコンを表示。

See the Pen #1368 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルが上にスライド表示。

See the Pen #1361 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、今日プションが上にスライド表示。

See the Pen #1212 – Image and title with caption on hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルをタイル状に表示。

See the Pen #1206 – Image hover effect with caption by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルとキャプションをアニメーション表示。

See the Pen #1353 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルをレイヤー状に表示。

See the Pen #1130 – Image with title and caption by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルとキャプションを左スライド表示。

See the Pen #1110 – Image with slide in text on hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルを上下からアニメーション表示。

See the Pen #1194 – Image with title & caption by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルとキャプションをアニメーション表示。②

See the Pen #1340 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルとキャプションをアニメーション表示。③

See the Pen #1333 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルとキャプションをアニメーション表示。④

See the Pen #1314 – Testimonial by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、写真に合わせてパララックス効果と見出し表示。

See the Pen #1342 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルを表示し、背景をぼかす。

See the Pen #1397 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、キャプションを追加表示。

See the Pen #1176 – Image with retro animated title by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、アイコンを伸縮させ、キャプションを表示。

See the Pen #1183 – Image with icon and caption on hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、サブメニューを表示。

See the Pen #1437 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、写真を縮小し、タイトルを表示。

See the Pen #1419 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、タイトルをタイル状に表示。

See the Pen #1379 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マウスホバーで、キャプションをアニメーション表示。

See the Pen #1403 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.