Как сделать нормальный caption для фото? - Вопросы по CSS

Бьюсь уже долгое время, периодически бросаю и вновь возвращаюсь к этой теме.
Хочу в CSS сделать caption у картинок по типу того, что изображён на фото:



То есть, чтобы caption располагался поверх изображения и, желательно, выглядел бы точно так же, как на скриншоте. Ссылка на статью, чтобы можно было подсмотреть код. Копировала CSS, вставляла в свой файлик стилей - ноль эффекта. Смотрела в инете разнообразные примеры с листингом кода, как на русском, так и на английском - всё равно не получается. Шаблон от YooTheme на Warp 7, довольно старый уже, и подписка давно закончилась. Да и техподдержка YooTheme довольно тормозная (был опыт).

Текст у меня вообще не хочет накладываться на изображение, хотя я и картинку, и текст оборачиваю в div и прописываю классы.

Хорошо бы ссылку на вашу страницу ...
Или, если на локалке, то на демо шаблона

В стандартном  Warp 7 вообще не предусмотрен вывод caption для изображений

В стандартном  Warp 7 вообще не предусмотрен вывод caption для изображений

Так я не использую тег caption, я пытаюсь сделать на чистом CSS. Демка шаблона - тут, хотя можно взять абсолютно любой шаблон на Warp 7, хоть бесплатный.

Ссылка на статью

Так там элементарная position: absolute;, только надо добавить position: relative(absolute, fixed); родительскому div и при необходимомсти - left самому элементу.

Там вот это (если я правильно кусок кода выхватила):


Куда position:relative добавить, в .article .photo span.descr span?

можно попробовать uikit-вский overlay приспособить  https://getuikit.com/v2/docs/overlay.html

можно попробовать uikit-вский overlay приспособить  https://getuikit.com/v2/docs/overlay.html

Да, я пробовала UIkit, всё ОК, но хочется сделать внешний вид, как на скрине. К тому же, если вдруг я сменю шаблон, и там не будет UIkit, у меня всё развалится.

http://joomlanet.ru/1.php


Если надо вверх/без фона/линия на всю и т.д., просто изменить в CSS нужное.

Большущее спасибо!

Да не за что! Если хотите-напишите чётко, как надо, я на демке поменяю (заодно посмотрите) и скопируете код.

А как сделать так, чтобы линия подчёркивания была на всю ширину бокса? border-bottom в .image:before не помогает.

А как сделать так, чтобы линия подчёркивания была на всю ширину бокса?

width: 100%;

Или вместо margin-left: 15px; поставьте left: 15px;right: 15px;

Изменил стиль, так?
// + добавил пару строк для адаптивности

width: 100%;

Не, так оно до границы изображения доходит. Я 90% ставила, но это тоже костыль.

Изменил стиль, так?
// + добавил пару строк для адаптивности

Ещё раз большое спасибо, особенно - за адаптивность.

Ещё можно сделать: при наведении появляется данный div  

И если вы заметили-я сделал описание для класса и cssА не для изображения.
Где-то вычитал-вроде так поисковики лучше "клюют".
Но не уверен.

width: 100%;
Не, так оно до границы изображения доходит

Для этого есть внешний отступ: margin: 0 15px;

Или сделайте, как предложил Robert

Для этого есть внешний отступ: margin: 0 15px;

Или сделайте, как предложил Robert

Да, я уже всё сделала, спасибо. В оригинале подчёркивание привязано к длине верхней строки текста, но я подумала, и решила, что подчёркивание по всей ширине блока (с учётом отступов) будет даже лучше.

Раз подходит-демку удаляю. Обращайтесь.