jQueryで作るマウスオンで見出しと説明文を表示させる画像ギャラリー

2010/01/30 21:49Update
TAGS: jQuery | マウス | 画像 | ギャラリー | チュートリアル

Syboos.jp編集長

マウスを画像の上に乗せると、その画像に対する説明や解説文などを表示させるチュートリアルです。

原文:Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery

イメージ
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