ギャラリーサイトなど、写真などを一覧で並べたりするときにキャプションやコメントを画像に重ねるような表示にしたいときに便利な「Label.css」をご紹介します。
白半透明のラベルを上下左右や角、さらにはマウスオーバーでフェードやスライドしながら出現するような表現も可能になっています。時間をかけずに実装したい場合は、CSSを読み込んで対象となる要素にクラス指定するだけなので活用しやすいので試してみてください。
それでは、使い方を見ていきましょう。
まずは、下記サイトもしくはGitHubよりデータを一式ダウンロードし「label.css」を任意のディレクトリに配置します。
サンプル1(画像の下にキャプションを配置の場合)
CSSを読み込む
基本ベースとなる「Label.css」を読み込みます。
1 |
<link rel="stylesheet" type="text/css" href="css/label.css" /> |
HTMLを記述
画像を<p>要素で囲います。(<p>要素でなくても構いません。)
1 |
<p class="label inside bottom"><img src="images/sample.jpg" alt="サンプル画像"></p> |
画像の下に配置するテキスト(キャプションやコメント)などをdata属性に記述します。
1 2 3 |
<p class="label inside bottom" data-label="静かな朝"> <img src="images/sample2.jpg" alt="サンプル画像"> </p> |
サンプル2(画像の左上にキャプションを配置・スライド表示の場合)
HTMLを記述
1 2 3 |
<p class="label inside top left float" data-label="静かな夕暮れ"> <img src="images/sample.jpg" alt="サンプル画像"> </p> |
その他のサンプルも確認してみてください。
このように、クラス指定を選んで追加するだけで表示する位置やエフェクトを操作できますので、簡単に利用することができます。背景色やフォントなどは、各自カスタマイズすれば表現の幅も広がりますのでいいですね。