[CSS]画像の上に半透明なパネルを簡単に配置できる便利なスタイルシート(フェードも可) -Label.css

画像の上に半透明なラベルを天地中央、左右に簡単に配置でき、しかもホバー時にフェードでラベルを表示するなどのエフェクトも備えたスタイルシートを紹介します。

サイトのキャプチャ

Label.css
Label.css- GitHub

Label.cssのデモ

デモでは、画像のラベルを動的に試すことができます。
通常利用する時は、静的に。

サイトのキャプチャ

デモ

左のパネルでラベルを表示する位置を指定すると、ラベルが表示されます。
中央の「○」をクリックしてみます。

サイトのキャプチャ

デモ:中央に表示

中央右をクリックしてみます。

サイトのキャプチャ

デモ:中央右に表示

ラベルはエフェクトも備えており、ホバー時にフェードで表示することもできます。

サイトのキャプチャ

デモ:ホバー時にフェードで表示

Label.cssの使い方

使い方は簡単で、ラベルはclassとdata属性を加えて指定するだけです。

Step 1: 外部ファイル

当スタイルシートをhead内に配置します。

<head>
<link rel="stylesheet" href="css/label.css" />
</head>

Step 2: HTML

画像を配置するimg要素にfigureを加えます。

<figure>
<img src="image.jpg" alt="代替テキスト">
</figure>

figureにclassでlabelを加え、配置するポジションを指定します。

<figure class="label inside bottom">
<img src="image.jpg" alt="代替テキスト">
</figure>

画像の上に配置するテキストをdata属性に記述します。

<figure class="label inside bottom" data-label="画像の上に配置するテキスト">
<img src="image.jpg" alt="代替テキスト">
</figure>

エフェクトを加える時は、更に追加します。

<figure class="label inside bottom fade" data-label="画像の上に配置するテキスト">
<img src="image.jpg" alt="代替テキスト">
</figure>

オプション

ラベルのポジションやエフェクトは、classに指定します。

inside
画像の内側
outside
画像の外側
top, middle, bottom ,left, right
配置する位置
fade, float
ホバー時のエフェクト

ラベルのカラーを変更したい時は、CSSなので簡単に変更できるのもいいですね。

top of page

©2017 coliss