[JS]画像に見出しとキャプションをスライド表示させるチュートリアル

jQueryを使用して、画像に半透明の見出しとキャプションをスライド表示させるチュートリアルをQuenessから紹介します。

Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery
demo

デモでは画像にマウスをホバーすると、上から見出し、下からキャプションをスライド表示させます。
見出しとキャプションは画像の前後にdiv要素で実装されています。

HTML

<div class="photo">
<div class="heading"><span>Telephoto Lens</span></div>

	<img src="images/fall.jpg" width="350" height="233" alt="" />
<div class="caption"><span>A lens for photographing distant objects; it is designed in a compact manner so that the distance from the front of the lens to the film plane is less than the focal length of the lens. </span></div>
</div>

スクリプトはjQueryとそのプラグインjQuery Easing Pluginが使用されています。