Получи 1 из 3 лицензий WPForms бесплатно!

Giveaway от разработчика плагина. Срок проведения 01.11.2019 – 31.12.2019.

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

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

Последнее обновление:

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

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

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

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

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

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