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

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

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

no image

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

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

no image

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

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

select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」

「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら

Lightboxなどが実装できるプラグイン「Magnific Popup」

「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい

no image

ファイルアップロードフォーム プラグイン

Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h

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

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

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

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

no image

[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」

「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト

Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」

「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン

Comment

見栄えがよくなった！Web制作するなら知っておきたいjQueryプラグインまとめ | コムテブログ へ返信する コメントをキャンセル

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

CAPTCHA

*

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

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

新規投稿

  • ブックマーク

    PAGE TOP ↑