マウスオーバーすると画像にキャプションを表示してくれる「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"との競合に注意
関連記事
-
-
シンプルにポップアップを実装できる「PopBox」
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!
-
-
画像ズーム プラグイン
画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
Lightboxプラグイン「Boxer」
「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ
-
-
親要素の大きさに合わせてテキストをリサイズ「FitText」
「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
-
-
タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」
「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768
-
-
レスポンシブにも対応したカレンダーを表示する「Calendario.js」
Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready
-
-
ページ内のフォントサイズを変更してくれる「Text Resizer」
「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j
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/ [...]