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

2010/10/09 00:41 Update

TAGS: jQuery | マウス | 画像 | ギャラリー | チュートリアル

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

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

イメージ
１）通常の画像表示

２）マウスオン時の画像表示

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>