画像の上に半透明の帯とテキストを表示

最近よく見かける、画像の上に半透明の帯を配置しテキストを表示する方法。
おしゃれですよね！

また、文字部分は画像ではなくテキストなんです。
テキストでの表示は、後々に文字部分だけを編集したい場合にも簡単に対応できますし、SEO的にも良いと思います。
ほんの少しCSSをいじれば実現可能ですので、とてもオススメです。
今回はこの画像の上にテキストを表示する方法を紹介したいと思います。

サンプルコード CSSとHTML

CSS

.sample {
	width: 200px;
	position: relative;
}
.sample p{
	position: absolute;
	left: 0;
	bottom: 0.5em;
	color: #fff;
	margin: 0;
	padding: 5px 0 5px 3%;
	width: 97%;
	background: #000;
	filter: Alpha(opacity=70);
	opacity: 0.7;
}
.sample a {
	text-decoration: none;
}
.sample a:hover p{
	text-decoration: underline;
}

HTML

<div class="sample">
	<a href="#">
		<img src="#" width="100%" />
		<p>画像の上に表示する文字</p>
	</a>
</div><!-- .sample -->

上記サンプルのは、他のCSSの干渉がなければ、

画像サイズに関係なく幅が200pxで表示される
画像の縦横比は維持している
半透明の帯の色は黒
不透明度70%
半透明の帯の下辺と画像の下辺は揃っていない
画像がリンクとなっている
マウスオーバーでテキストに下線が現れる

という設定になっています。
適宜好みに合わせて変更をしてください。

WordPressでの応用

私はWordPressを利用しているのですが、今回紹介している方法を応用すれば本当に色々なことができます。
WordPressの記事タイトル一覧にアイキャッチ画像を表示の記事紹介したアイキャッチ画像表示と合わせて使えば、とても見やすくてオシャレなページができあがると思います。私はループ内に下記のようなコードを書いて使用しています。

<div class="sample">
	<a href="<?php the_permalink(); ?>">
		<img src="<?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, ”, true); echo $image_url[0]; ?>" width="100%" class="colorbox-0" />
		<p><?php the_title() ?></p>
	</a>
</div><!-- .sample -->