Как сделать изображения в WordPress с hover эффектами

Hover-эффекты активно используются в современном веб-дизайне на ряду с lightnbox. Эти эффекты представляют собой изменение изображения при наведении на неё мышки. Выглядит это красиво, современно и хорошо запоминается. В этой статье мы покажем вам, как сделать такой приём с изображениями в WordPress.

Обычно hover-эффекты предусмотрены установленным шаблоном. И если в вашем шаблоне такого нет, то установить такие эффекты можно с помощью редактирования CSS, что чрезвычайно сложно для начинающего вебмастера.

Чтобы решить эту задачу, существует специальный плагин. Благодаря ему можно применить к изображениям WordPress hover-эффект и не затрагивать вообще программирования кодом. Познакомимся с этим инструментом поближе.

Изображения WordPress с плагином Royal Image Hover Effects

Royal Image Hover Effects – это плагин для изображений WordPress, который позволяет применить к картинкам hover-эффект или эффект при наведении. Работа плагина заключается в следующем: к каждому отдельно взятому изображению можно применить тот или иной эффект из представленных возможных, затем это изображение можно поместить в запись или на страницу с помощью шорткода. Эффект заключается в появлении надписи при наведении мышки на картинку. Пожалуй, проще некуда.

Скачайте, установите и активируйте этот плагин у себя на сайте. После этого вы увидите в консоли новый пункт «Royal Image Hover Effects». Чтобы добавить новое изображение WordPress с hover-эффектом, перейдите в подпункт «Add New Item». Здесь в вашем распоряжении будет целый набор инструментов для создания красивого и интересно изображения:

• Royal hover Item. Здесь необходимо загрузить само изображение, которое будет участвовать в эффекте. Сделать это можно с помощью кнопки «Choose file». Загрузить можно из медиабиблиотеки или с компьютера. Также тут можно дать заголовки и содержание надписи, которая будет появляться при наведении мышки. Можно применить HTML-теги, поэтому есть возможность форматировать текст и создавать там ссылки.
• Setting panel. Здесь у вас собраны широчайшие настройки, которые позволяют настраивать внешний вид hover-эффекта данного изображения в WordPress. Инструментов очень много, есть множество возможностей для кастомизации. Однако надо заметить, некоторая часть настроек доступна только в PRO версии.
• Social style icon setting. Хоть эта секция и называется с «социальным» словом, иконки тут разнообразные. Здесь есть возможность установить какие-то небольшие иконки под описанием изображения, а также установить ссылку для каждой из них. Всего можно поставить до 4 иконок.

Когда вы выполните все настройки, вы можете поместить изображение WordPress в запись или на страницу с помощью шорткода, который появляется на этой же странице справа. О шоркодах вы можете почитать тут. Для достижения желаемого эффекта рекомендуем поэкспериментировать с разобразными настройками плагина.