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

関連記事

ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード　デモ スクリプ

no image

クリックするとテキストボックスにかわるラベルを実装

Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです

no image

グリッドレイアウト プラグイン

Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb

レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷

タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768

no image

エフェクト豊富なニュースティッカー用プラグイン「inewsticker」

「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ

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

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

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

no image

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

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

開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち

Comment

Message

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

CAPTCHA

*

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

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

新規投稿

  • ブックマーク

    PAGE TOP ↑