ホームページ作成/表示・非表示の切替 (HTML,CSS,JavaScript)

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

画像の上にマウスを載せたときにだけ、半透明の説明文(キャプション)が、アニメーション効果と共に下方からスライドして表示される、という表示効果の作り方をご紹介。jQueryを使って簡単に作れます。写真をたくさん並べて掲載するようなページで、デザイン面でちょっと凝ったことをしてみたい場合にお勧めです。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

画像の下にキャプションがある例

画像の下にキャプションがある例

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

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


 
画像の上にマウスが載ると、キャプションがスライドして表示される

画像の上にマウスが載ると、キャプションがスライドして表示される

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

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


 

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

サンプルページ

サンプルページ

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

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

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


 

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

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

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

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます