画像にマウスを載せた際に、半透明の説明を重ねる方法

画像のキャプションを、半透明にして、画像の下部に重ねて表示してみる

「画像のキャプション」というと、たいていは画像の下部に表示されます。その方が、画像と同時にキャプションが読めて便利です。

しかし、ページデザインや掲載する画像の内容によっては、キャプションはそれほど重要ではない場合もあります。とはいえ、画像に対する何らかの補足説明は一応書いておきたい、という場合もあるでしょう。

そんなときには、「画像の上にマウスポインタが載せられたときにだけ、半透明の説明文(キャプション)がスライドして表示される」という表示効果を使ってみてはいかがでしょうか。

写真をたくさん並べて掲載するようなページで、デザイン面でちょっと凝ったことをしてみたい場合にお勧めです。

キャプションがスライドして表示されるサンプルページ

今回は、右図のようなページを作る場合を例にして解説致します。まずは、ブラウザでサンプルページをご覧になり、実際に画像の上にマウスポインタを載せて動作を試してみて下さい。

画像の上にマウスを載せると、すぐにキャプションが下側からスライドして表示されます。マウスを画像外に移すと、キャプションは下方向へスライドして消えます。

※以後の解説は、上記のサンプルページのソースも併せて見ながら読み進めると分かりやすいでしょう。ぜひ、見比べながら読み進めてみて下さい。

jQuery(JavaScript)とCSSで簡単に作成できる

このような「キャプションがスライドして表示される」機能は、jQueryを活用することで、ほんの数行のJavaScriptを記述するだけで簡単に作れます。また、キャプション自体を半透明にして重ねるのは、CSSで簡単に指定できます。以後のページでは、「HTMLソース」→「CSSソース」→「JavaScriptソース」の順に、それぞれの記述方法を解説しています。

【本記事の目次】
1. 画像とキャプションをセットにするHTMLと、並べて装飾するCSSを記述 (p.2)
2. マウスの動きに合わせてキャプションをスライドさせるJavaScriptを記述 (p.3)

それでは、次のページから、このテクニックを実現する方法を順に見ていきましょう。まずは、HTMLを記述する方法からです。