Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
#2470a1
Как сделать подпись слайда поверх фото в галерее GL21 в Tilda
Ремонт под ключ
Согласовываем Техническое Задание
Физически не участвуете ни в одном этапе ремонта, начиная от закупки чернового материала заканчивая вешалкой в Вашем гардеробе. Ремонт, выполненный с использованием качественных материалов и включающий в себя капитальную замену основных инженерных сетей – вариант, помогающий добиться значительного улучшения условий проживания. Поскольку в последние годы евроремонт стал более доступным, множество жителей города могут позволить себе комплекс этих услуг.
Задать вопрос

Как сделать подпись слайда поверх фото в галерее GL21 в Tilda

1
Создали галерею GL21
2
Заполнили заголовок и описание для каждого слайда в контенте блока
3
Добавили стиль в блок другое Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём подпись для слайдов поверх фото.
Меняем расположение заголовка и описания для фото. Длительность видео: 13 минут
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<style>
.t764 .t-bgimg {
    filter: brightness(0.5);
    transition: all 0.2s;
}
.t764 .t-slds__main:hover .t-bgimg {
    filter: brightness(1);
}
.t764 .t-slds__imgwrapper {
    position: relative;
}
.t764 .t-slds__imgwrapper:before,
.t764 .t-slds__imgwrapper:after{
    position: absolute;
    color: #fff;
    font-family: 'Roboto';
    width: 100%;
    text-align: center;
    z-index: 99;
}
.t764 .t-slds__imgwrapper:before {
    content: attr(title);
    bottom: 40px;
    font-size: 24px;
    font-weight: 600;
}
.t764 .t-slds__imgwrapper:after {
    content: attr(data-img-zoom-descr);
    bottom: 20px;
    font-size: 16px;
    font-weight: 200;
}
@media screen and (max-width:520px){
.t764 .t-slds__imgwrapper:before {font-size: 20px}  
.t764 .t-slds__imgwrapper:after {font-size: 14px}
}
</style>
Made on
Tilda