マウスオーバーすると画像にキャプションを表示してくれる「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"との競合に注意

その他プラグイン
SlipHover　Slickhover.js

Related

ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」 親要素の大きさに合わせて画像をリサイズ「imgLiquid」 Default Thumbnailローソク足チャート「jqPlot」 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」 Default Thumbnail色々なタイプの画像ギャラリーが実装できる「Rondell」 マウスオーバーでキャプション表示してくれる プラグイン Default Thumbnail画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」 Default Thumbnailスワイプ対応の画像スライダー・ギャラリー用プラグイン
  • このエントリーをはてなブックマークに追加

関連記事

no image

要素を折りたたみできる「nestedAccordion」

「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち

わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」

サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし

ページ内のフォントサイズを変更してくれる「Text Resizer」

「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j

シンプルにモーダルウィンドウを実装できる「leanModal」

「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま

ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン

画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ

no image

日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot

レスポンシブ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide

画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな～と思い試してみました。 ナビゲーション内にサムネイルを

カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト

no image

テーブル・リスト要素を便利にしてくれるプラグイン

レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変

Comment

@souvenir038 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

PREV
DebugKitを導入DebugKit Installation
NEXT
CakePHP インストール時エラーの対処

新規投稿

  • ブックマーク

    PAGE TOP ↑