[CSS覚書]画像ギャラリー風のページの画像に透明風のキャプションを入れてみた。

これはオシャレっぽくてまた使いたいので、覚書メモ。
コリスさんからひっぱってきました。


画像に枠線やウォーターマーク、キャプションをつけるスタイルシート | コリス

チュートリアルのデモはこんな感じ。

<div class="img-desc"> 
			<img src="sample.jpg" alt="" /> 
			<cite>Salone del mobile Milano, April 2008 - Peeta</cite>	
		</div> 
img-desc {
	position: relative;
	display: block;	
	height:335px;
	width: 575px;
	margin: 0 auto;
}
.img-desc cite {
	background: #111;
	-moz-opacity:.55;
	filter:alpha(opacity=55);
	opacity:.55;
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 555px;
	padding: 10px;
	border-top: 1px solid #999;
}

透明度の設定

透明度はもちろんこの部分で設定しているようですが、

	-moz-opacity:.55;
	filter:alpha(opacity=55);
	opacity:.55;

それぞれ、以下のブラウザに合わせた記述のようです。

  • -moz-opacity(Firefox用)
  • filter(IE用)
  • opacity(Safari,Opera用)

参考:CSSで画像を透過させる方法 filter,-moz-opacity,opacity

以下のページでも様々な検証がされてます。
スタイルシート[CSS]/フィルタ/半透明のグラデーションをかける – TAG index Webサイト
アルファチャンネルとopacityの違い:FirefoxとSafariのCSS対応 – builder

ギャラリー風カスタマイズ

最終的にはこんな感じになりましたが、
画像ギャラリーみたいにする場合には、
最初に画像の幅と高さを決めてしまった方がよさそうですね。
またciteの方のwidthはpadding分を引くこと。

写真部分をあまり隠したくなかったので、透明スペースの高さを少し調整。
heightを入れてしまってもいいのかもしれないけど、
フォントサイズとpaddingを小さめにして調整しました。
上のライン(border-top:1px solid #999)も削除しています。

CSS最終形態

htmlの構成は変えておりません。
敷き詰める場合は、div単位で並べればよいだけですね。

.img-desc {
	position: relative;
	display: block;
	height:207px;
	width: 315px;
	float: left;
	margin-top: 20px;
	margin-left: 5px;
}
.img-desc cite {
	background: #111;
	-moz-opacity:.55;
	filter:alpha(opacity=55);
	opacity:.55;
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 305px;
	padding: 5px;
	font-size: 12px;
}

CSS

Posted by ponnao