マウスオーバー時にサムネイルがポップアップするWebデザイン事例

DESIGNER

codrops

2019.01.31 2023.12.07

デモページ
ソースダウンロード

今回はマウスオーバー時にホバーエフェクトを発生させるWebデザイン事例をご紹介します。

リンクの上にオンカーソルした際、特別なエフェクトを伴ってサムネイル画像がポップアップで表示されるというものです。

このアイデアを使ったシンプルな例としてFugeのWebサイトが、またより複雑な例としてLouis AnsaのポートフォリオやZhenya Rynzhukの Blown Art Works and News Platformがあります。

※なお、このアニメーションはTweenMaxを利用しており、古いブラウザでは対応していない場合があるためご注意ください。

マウスオーバー時のホバーエフェクト例

デモ1

デモ2

デモ3

このホバーエフェクトの事例が、あなたに良いインスピレーションを与えることを祈っています！

（原文：Mary Lou　翻訳：じきる）

あわせて読みたい！▼

複数枚のスライドを階段状に表示するスライドショーのご紹介

Workship MAGAZINE

スライドアウトボックスメニューという新しいアプローチのご紹介

Workship MAGAZINE

動的なグリッドレイアウトのWebページテンプレートのご紹介

Workship MAGAZINE

#副業OK
#新規事業
#スタートアップ
#急募
#長期案件
#スポット案件（1ヶ月）
#フルリモートOK

【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集

#スタートアップ

【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！

#スタートアップ
#土日週末OK
#急募
#長期案件
#正社員募集
#フルリモートOK

Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities. The team of Codrops is dedicated to provide useful, inspiring and innovative content that is free of charge.

この記事はcodropsからの転載です。配信元または著者とコンテンツ契約を結び配信しています。
Image Reveal Hover Effects

Follow @goworkship

■当サイト掲載中の情報について
Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。
■アクセス解析ツールについて
当サイトでは、Googleによるアクセス解析ツール『Googleアナリティクス』を利用しています。このGoogleアナリティクスはトラフィックデータの収集を行なっています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この規約に関して、詳しくはGoogle アナリティクス利用規約をご覧ください。

■広告の配信について
当サイトは第三者配信の広告サービス『Google Adsense』を利用しています。広告配信事業者は、取得した閲覧履歴や購買履歴等の情報を分析して、ユーザーの趣味・嗜好に応じた新商品・サービスに関する広告を表示することがあります。また当サイトは、商品やサービスを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、『A8.net』『もしもアフィリエイト』『afb』『アクセストレード』『バリューコマース』『レントラックス』『felmat』『TGアフィリエイト』『リンクシェア』『楽天アフィリエイト』『Amazon アソシエイト』の参加者です。IPアドレス、ユーザーエージェント、クッキー情報、成果結果情報（広告成果毎の識別子）などを取得し、広告配信に係る成果計測、広告配信に係る不正防止などに利用する場合があります。