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

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

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

В этой статье вы узнаете, как добавить появление текста на картинке вручную в нужном месте с нужной анимацией при помощи нескольких правил 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.

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

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

Поделиться в facebook
Поделиться в vk
Поделиться в email
Поделиться в telegram
Поделиться в whatsapp

Оставьте комментарий

Do NOT follow this link or you will be banned from the site!