jQueryで作るマウスオンで見出しと説明文を表示させる画像ギャラリー
2010/01/30 21:49Update
マウスを画像の上に乗せると、その画像に対する説明や解説文などを表示させるチュートリアルです。
原文:Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery
イメージ
1)通常の画像表示

2)マウスオン時の画像表示

HTMLコード
デモ
CSSとJavascriptコード詳細は原文まで。

イメージ
1)通常の画像表示
2)マウスオン時の画像表示
HTMLコード
<div class="photo"> <div class="heading"><span>Pier</span></div> <img src="images/pier1.jpg" width="300" height="186" alt="" /> <div class="caption"><span>Lorem de scua shemf huan rougt ecrit vato de souju kanasa.</span></div> </div>
デモ
CSSとJavascriptコード詳細は原文まで。
Sponsored Link
- Relative Articles
- jQuery Visual Cheat Sheet - (2010/08/14 00:46)
- jQuery & CSSで作るぐるぐる回すスライドショー - (2010/08/08 16:09)
- jQueryとCSSで作るセクシーなドロップダウンメニュー - (2010/08/08 14:33)
- Mac-like icon dock - jQueryを使ったMac OS Xのアイコンドック風メニュー - (2010/07/01 23:24)
- Advanced jQuery background image slideshow - jQueryで作る背景画像のスライドショー - (2010/05/14 17:23)
- jQueryで作る入力補助用ソフトキーボード - (2010/04/16 22:58)
- CSS & jQueryで作る画像スライダチュートリアル - (2010/04/02 13:17)
- jQueryPad - 便利なJavaScript/HTMLデバッグ・確認ツール - (2010/03/30 18:35)