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

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

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

no image

画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」

「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ

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

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

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

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

no image

シンプルな画像スライダー/ギャラリー用プラグイン

スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン

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

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

no image

テキストに装飾効果を付けるプラグイン

Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa

no image

ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、

マウスオーバーでキャプション表示してくれる プラグイン

画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成

no image

ポップアップ・モーダル ウィンドウ プラグイン

ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers

Comment

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

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

CAPTCHA

*

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

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

新規投稿

  • ブックマーク

    PAGE TOP ↑