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

2010/10/09 00:41 Update
TAGS: jQuery | マウス | 画像 | ギャラリー | チュートリアル

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


原文: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


有关作者
Syboos.jp編集長システム設計や開発、保守運営などを行ってます。オープンソース技術に興味があります。