画像のキャプション表示を重ねるのに便利な「Label.css」

画像のキャプション表示を重ねるのに便利な「Label.css」

ギャラリーサイトなど、写真などを一覧で並べたりするときにキャプションやコメントを画像に重ねるような表示にしたいときに便利な「Label.css」をご紹介します。

白半透明のラベルを上下左右や角、さらにはマウスオーバーでフェードやスライドしながら出現するような表現も可能になっています。時間をかけずに実装したい場合は、CSSを読み込んで対象となる要素にクラス指定するだけなので活用しやすいので試してみてください。

 

 

それでは、使い方を見ていきましょう。

まずは、下記サイトもしくはGitHubよりデータを一式ダウンロードし「label.css」を任意のディレクトリに配置します。

Label.css

 

サンプル1(画像の下にキャプションを配置の場合)

CSSを読み込む

基本ベースとなる「Label.css」を読み込みます。

 

HTMLを記述

画像を<p>要素で囲います。(<p>要素でなくても構いません。)

 

画像の下に配置するテキスト(キャプションやコメント)などをdata属性に記述します。

 サンプル1

 

サンプル2(画像の左上にキャプションを配置・スライド表示の場合)

HTMLを記述

 サンプル2

その他のサンプルも確認してみてください。

DEMO

 

このように、クラス指定を選んで追加するだけで表示する位置やエフェクトを操作できますので、簡単に利用することができます。背景色やフォントなどは、各自カスタマイズすれば表現の幅も広がりますのでいいですね。


 

タイトルとURLをコピーしました