» Снипеты »
Как добавить текст на картинке при наведении мышкой
Вы хотите добавить картинку, на которой появляется текст при наведении мышкой, но в банере конструктора страниц вы можете сделать только стандартную анимацию.
В этой статье вы узнаете, как добавить появление текста на картинке вручную в нужном месте с нужной анимацией при помощи нескольких правил css.
Добавьте секцию
Добавьте секцию, укажите ширину и высоту.
Добавьте картинку в секцию.
Дайте секции или ее колонке (в зависимости от вашего случая) класс tb_box.
Добавьте Заголовок и Текстовый редактор
Добавьте нужный текст в Заголовок и Текстовый редактор и отформатируйте текст.
Дайте Заголовку класс tb-title tb-title_hide.
Дайте Текстовому редактору класс tb-desc tb-desc_hide.
Добавьте css
Теперь нужно добавить css правила в поля элементов в вашем пейдж-билдере.
Если у вас Elementor Pro, вы можете добавить css в Секция — Расширенные — Пользовательский css.
Если у вас нет Pro, вы можете добавить css в style.css дочерней темы или во Внешний вид — Настроить — Дополнительные стили.
Исаакиевский собор
Санкт-Петербург
Добавьте ссылку
Если вы хотите добавить ссылку на получившийся банер, используйте бесплатный плагин Make Column Clickable Elementor, или платный плагин PAFE Piotnet.
Этот плагин добавит ссылку на всю колонку, а не только на отдельные элементы.
Надеюсь, статья была полезна. Оставляйте комментарии.
Похожие записи
Как изменить порядок колонок в Elementor
Как менять цвет липкого хедера при прокручивании
