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

  • 18 Ответов
  • 713 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Missile

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



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

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

*

fbr

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

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

*

Missile

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

*

robert

  • ********
  • 4002
  • 371
Ссылка на статью
Так там элементарная position: absolute;, только надо добавить position: relative(absolute, fixed); родительскому div и при необходимомсти - left самому элементу.
  • Не будь паразитом, сделай что-нибудь самостоятельно!
  • В личке и по Skype не даю советов.

*

Missile

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

Код
.article .photo>span.descr {
    color: #FFF;
    font-size: 13px;
    line-height: 16px;
    position: absolute;
    margin: 0 20px;
    bottom: 15px;
    z-index: 30;
}
.article .photo span.descr, .article .photo>span.descr, .article .picture .title span, .article img, .cover .title span, .externalBlock, .newsPage article .picture .title span {
    display: block;
}
.article .photo span.descr span {
    border-top: 1px solid #FFF;
    padding-top: 10px;
    margin-top: 10px;
    display: block;
}

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

*

Ilhom666

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

*

Missile

  • *****
  • 791
  • 79
можно попробовать uikit-вский overlay приспособить  https://getuikit.com/v2/docs/overlay.html
Да, я пробовала UIkit, всё ОК, но хочется сделать внешний вид, как на скрине. К тому же, если вдруг я сменю шаблон, и там не будет UIkit, у меня всё развалится.

*

vipiusss

  • ********
  • 5496
  • 318
  • JoomlaNet
http://joomlanet.ru/1.php

Спойлер
[свернуть]

Если надо вверх/без фона/линия на всю и т.д., просто изменить в CSS нужное.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями


*

vipiusss

  • ********
  • 5496
  • 318
  • JoomlaNet
Да не за что! Если хотите-напишите чётко, как надо, я на демке поменяю (заодно посмотрите) и скопируете код.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Missile

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

Цитировать
А как сделать так, чтобы линия подчёркивания была на всю ширину бокса?
width: 100%;
Ставь лайк, если согласен, и делай репост!

  => мои публикации
    => мои работы
      => спектр моих услуг

*

robert

  • ********
  • 4002
  • 371
Или вместо margin-left: 15px; поставьте left: 15px;right: 15px;
  • Не будь паразитом, сделай что-нибудь самостоятельно!
  • В личке и по Skype не даю советов.

*

vipiusss

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

Спойлер
[свернуть]
« Последнее редактирование: 30.04.2017, 20:01:42 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Missile

  • *****
  • 791
  • 79
width: 100%;
Не, так оно до границы изображения доходит. Я 90% ставила, но это тоже костыль.
Изменил стиль, так?
// + добавил пару строк для адаптивности
Ещё раз большое спасибо, особенно - за адаптивность.

*

vipiusss

  • ********
  • 5496
  • 318
  • JoomlaNet
Ещё можно сделать: при наведении появляется данный div  ::)

И если вы заметили-я сделал описание для класса и css
Код
content: attr(title);
А не для изображения.
Где-то вычитал-вроде так поисковики лучше "клюют".
Но не уверен.

« Последнее редактирование: 30.04.2017, 22:47:21 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

Цитировать
width: 100%;
Не, так оно до границы изображения доходит
Для этого есть внешний отступ: margin: 0 15px;

Или сделайте, как предложил Robert
« Последнее редактирование: 30.04.2017, 22:57:01 от Филипп Сорокин »
Ставь лайк, если согласен, и делай репост!

  => мои публикации
    => мои работы
      => спектр моих услуг

*

Missile

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

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

*

vipiusss

  • ********
  • 5496
  • 318
  • JoomlaNet
Раз подходит-демку удаляю. Обращайтесь.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями