ウェブサイトを魅力的に仕上げるだけでなく、ユーザーの注目を集めることができる、アニメーション・エフェクト。今回は、サイトコンテンツ表示に活用できる、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.
40種類のホバーエフェクトをセットに。
さまざまなエフェクトをひとまとめにしているので、手軽にホバーエフェクトを楽しむことができる HoverImage.css 。
See the Pen Imagehover.css – An Image Hover CSS Library by LittleSnippets.net (@littlesnippets) on CodePen.