Создание красивых эффектов при наведении курсора в WordPress

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

Для этого воспользуемся плагином Image Hover Effects Css3. Все возможные эффекты, которые можно создать с помощью этого плагина, вы можете увидеть на демо страницах:

Надо сразу сказать, что в бесплатной версии плагина есть ряд ограничений, но им вполне можно пользоваться. Платная версия стоит $16.

Настройка плагина Image Hover Effects Css3

После установки и активации плагина нужно перейти в меню Hover Effects — Add New Hover Effect. Появится окно, где нужно задать настройки для блока.

• Заголовок — заголовок для группы изображений (или одного изображения). Для каждой созданной таким образом записи можно указать несколько элементов. Каждый элемент добавляется кнопкой Add New под секцией.

Все вводимые параметры вы может впоследствии отредактировать.

Paste URL or use from Media — здесь загружаем картинку;

Title — это атрибут изображения (можно не указывать);

Width и Height — ширина и высота картинки (доступно только в платной версии);

Caption Text — текст, который будет появляться над изображением. Можно использовать редактор (кнопка Rich Editor);

Caption Background Color — цвет фона под текстом. Цвета задаются в шестнадцатиричном формате, например #ffffff;

Border Width и Border Color — ширина и цвет границы (в платной версии);

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

Link To — ссылка с картинки;

Link Target — если указано _blank, то ссылка откроется в новом окне. Если нужно открывать в том же окне, оставьте в поле пустое значение;

Popup — открывать во всплывающем окне (в платной версии);

Hover Style — применяемый эффект.

Далее идет кнопка Add New, с помощью которой можно добавить новый элемент.

Еще ниже есть поля:

• Number of Images in a Row: — количество элементов в строке (то есть сколько элементов вы добавили);
• Masonry Grid — расположение элементов в виде сетки (в платной версии);
• Custom CSS — можно указать свои стили CSS.

После того, как вы сделали необходимые настройки и сохранили изменения, нужно скопировать шорткод элемента в правом сайдбаре (я обвел его красным на картинке) и вставить в нужное место записи или страницы. В результате на этом месте будут отображаться созданные вами элементы Hover Effects.

В целом плагин предлагает 70 вариантов эффектов. Если будете делать эффекты для круглых изображение (в начале названия эффекта слово Circle), то картинки желательно загружать квадратные, иначе они будут выглядеть в форме эллипса.