マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら
スクリプト
<link href= "mosaic.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"></script> <script src="mosaic.1.0.1.min.js" type="text/javascript"></script>
実装
<div class="mosaic-block bar3"> <a class="mosaic-overlay" href="#"><div class="details">キャプション</div></a> <a class="mosaic-backdrop" href="#"><img src="xxx.jpg" alt="" /></a> </div>
ポイントは、スライドやフェイドさせるほうを"mosaic-overlay"に、動かさないものを"mosaic-backdrop"に指定します。逆バージョンもなかなかいい感じにできるかと。(←はじめにキャプションを表示しておいてマウスオーバで画像をスライドさせるなど)
デモはこちら
その他
CSSを読み込む場合は、".fade"との競合に注意
関連記事
-
-
画像ギャラリーを実装できる「Galleria」
Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな～と思い試してみました。 ナビゲーション内にサムネイルを
-
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
-
-
入力数値の桁区切り挿入
ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu
-
-
日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot
-
-
Lightboxプラグイン「Boxer」
「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ
-
-
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え
-
-
selectボックスを華麗にしてくれる「Chosen」「Select2」
selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN
-
-
時刻入力に便利な「Timepicker for Bootstrap」(Bootstrap 2)
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 目次 実装方法 モダール形式 Datepicker
-
-
シンプルにポップアップを実装できる「PopBox」
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!
-
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
Comment
“jQuery: マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」 | Think deeply, Do less, More effective” https://t.co/JPnsiAUSiP
2件のコメント http://t.co/M0Q4jv094Q “jQuery: マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」 | Think deeply, Do less, More effective” http://t.co/Cu9jWNDV6u
これ試してみよう。 / “jQuery: マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」 | Think deeply, Do less, More effective” http://t.co/vpi7F4dSte
[…] jQuery | マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」 […]
jQuery: マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」 | Think deeply, Do less, More effective http://htn.to/uZ9Fi1 他2コメント http://b.hatena.ne.jp/entry/kwski.net/jquery/1006/#tw?u=michael0404 …
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」 http://kwski.net/jquery/1006/ @kwski3さんから
キャプション
JQUERYでthumnailを呼び出したい http://ja.forums.wordpress.org/topic/19953
オーバーレイ
[*jQuery][*plugin] / jQuery: マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」 | Think deeply, Do less, More effective http://htn.to/fzkJby
WordPress › フォーラム » サムネイルにマウスオーバーするとタイトルが表示されるようにしたい https://ja.forums.wordpress.org/topic/14332
[...] http://kwski.net/jquery/1006/ [...]