Смотреть пример

Эффект прозрачного текста

Модификатор создает эффект для текста, который на фоне картинки делает его прозрачным, но добавляет непрозрачный контур

Коллекция

Код скопирован!

Скопировать код

Шаг 2

Копируем код

jQuery

Для корректной работы блоков подключите библиотеку jQuery:

Инструкция с подключением кода

Настройки сайта -> Еще -> Подключить jQuery на страницах сайта

Задаем блоку класс uc-tistols-tl04
Добавляем текстовый элемент, который будет с эффектом прозрачности.
Задаем ему цвет и класс tistols-border-text
Поверх текстового элемента добавляем изображение/галерею

Шаг 1

Создаем Zero Block

<style>
.uc-tistols-tl04 {
position: relative
}
.tistols-border-text-a {
z-index: 55!important;
pointer-events: none;
}
.tistols-border-text-a .tn-atom {
color: rgba(255, 255, 255, 0)!important; /* Делаем текст прозрачным */
-webkit-text-stroke: 1px #fff;
}
</style>
<script>
$(function(){
var clonedElement = $('.tistols-border-text').clone(true);
clonedElement.addClass('tistols-border-text-a').appendTo('.uc-tistols-tl04 .t396__artboard');
console.log('Добавлено')
})

</script>

Шаблон страницы

Код скопирован!

70351979

Как скопировать шаблон

Нажми, чтобы скопировать номер

№

Текст скопирован в буфер обмена!

Текст скопирован в буфер обмена!

Вам также может быть интересно:

Pro подписка

Pro подписка

Модификации

Модификации

Слайдер с переключателями при наведении

Гибкий слайдер с видео (прямоугольный)

Модификации

Pro подписка

Я.Карта с кластерами и карточками объектов

Перейти в Telegram-канал

Подпишитесь на наши обновления в телеграм