マウスオーバーすると画像にキャプションを表示してくれる「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スワイプ対応の画像スライダー・ギャラリー用プラグイン
  • このエントリーをはてなブックマークに追加

関連記事

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

no image

バリデーション プラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

表示パターン豊富なスライダー「flexslider 2」

「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示

リストをインクリメント検索・ソートできる「List.js」

List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト

商用利用フリー Lightbox プラグイン

商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ

画像ズーム プラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。

親要素の大きさに合わせてテキストをリサイズ「FitText」

「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head

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

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

入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」

「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

Comment

Message

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

CAPTCHA

*

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

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

新規投稿

  • ブックマーク

    PAGE TOP ↑