Как добавить текст на картинке при наведении мышкой

Вы хотите добавить картинку, на которой появляется текст при наведении мышкой, но в банере конструктора страниц вы можете сделать только стандартную анимацию.

В этой статье вы узнаете, как добавить появление текста на картинке вручную в нужном месте с нужной анимацией при помощи нескольких правил css, или с помощью плагина для Elementor.

Добавьте секцию

Добавьте секцию, укажите ширину и высоту.

В настройках секции добавьте картинку в фон секции.

Дайте секции или колонке (в зависимости от вашего случая) класс tb_box.

Добавьте Заголовок и Текстовый редактор

Добавьте нужный текст в Заголовок и Текстовый редактор и отформатируйте текст.

Дайте Заголовку класс tb-title tb-title_hide.

Дайте Текстовому редактору класс tb-desc tb-desc_hide.

Добавьте css

Теперь нужно добавить css правила в поля элементов в вашем пейдж-билдере.

Если у вас Elementor Pro, вы можете добавить css в Секция — Расширенные — Пользовательский css.

Если у вас нет Pro, вы можете добавить виджет HTML и вставить стили между тегами <style> </style>.

Или добавьте правила в файл style.css дочерней темы или во Внешний вид — Настроить — Дополнительные стили.

Добавьте ссылку

Если вы хотите добавить ссылку на получившийся банер, используйте бесплатный плагин Make Column Clickable Elementor, или платный плагин PAFE Piotnet.

Этот плагин добавит ссылку на всю колонку, а не только на отдельные элементы.

Плагин

Если вам нужно сделать появление текста на картинке в Элементоре, и вы не хотите это делать вручную, то попробуйте этот плагин:

Читайте также:

1. Как изменить порядок колонок в Elementor
2. Липкое меню Вордпресс с помощью Elementor
3. Как закрыть любую секцию в Elementor по клику

Надеюсь, статья была полезна. Оставляйте комментарии.