Заголовок на фоне картинки

Собственно суть вопроса состоит в следующем, имеем такого рода подачу краткой новости на главной странице (как пример):

1. Картинка | 2. Заголовок | 3. Краткое описание | 4. Дополнительные данные

Каким образом можно осуществить, чтобы заголовок (2), впечатывался на картинке (1). Понимаю что все это через CSS, но не могу догнать как. Порой заголовки могут отображаться в две строки, а то и три. Плюс ко всему, когда он "заедет" на картинку, хотелось бы знать как отредактировать затемнение за заголовком изображения. Чтобы было какое то отделение от картинки, но в то же время заголовок был на ней. Вот как например на этой картинке.

Нужно было сразу картинку эту показать, а не заниматься тавтологией. В общем суть вроде обрисовал. Хотя бы набросок кода дайте, я уж с ним поэкспериментирую. 

Надеюсь на вашу всемогущую помощь. 

UPD. В примере заголовок "Текст" показан в левом верхнем углу, в моем случае, нужно чтобы был просто снизу сплошной полосой.