CSS: Вариант оформления подписи к изображению

В статье мы рассмотрим один из вариантов оформления подписи к изображению.
Итак, приступим…
В контейнер div заключим нашу картинку и подпись к ней, html код следующий:

<div>
        <img alt="exp2" src="exp2.jpg" width="302" height="189" />
        <span>Тут любая надпись, выступающая в качестве подписи к картинке</span>
</div>

Приступим к непосредственному описанию css. Для контейнера зададим ширину и спозиционируем относительно его исходного места.

#exp
{
	position: relative;
	width: 302px;
}

У картинки уберем отступы, рамку и сделаем ее блочной.

#exp img
{
	display: block;
	border: none;
}

Осталось задать свойства для span. Также сделаем его блочным, зададим отступ от рамки до текста, спозицианируем абсолютно, разместим его у нижнего края картинки, зададим фон и шрифт:

#exp span
{
	display: block;
	padding: 10px;
	width: 282px; //ширина должна быть как ширина исходной картинки за минусом отступов
	position: absolute;
	bottom: 34px;
	background: black;
	opacity: 0.8;
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	text-align: center;
	color: white;
	font: 14px Arial;
}

Итак, вот что в итоге получили:

Тут любая надпись, выступающая в качестве подписи к картинке

Отлично получилось, неправда ли? 🙂