Как добавить эффекты наведения курсора на изображение в WordPress (5 простых способов)

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

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

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

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

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

Метод 1: Использование плагина

Плагин сэкономит вам много времени и усилий, особенно если вы хотите использовать несколько эффектов при наведении курсора на одном сайте.

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

Использование плагина, такого как Image Hover Effects Ultimate, значительно упрощает этот процесс. Этот плагин бесплатен для всех и предлагает широкий спектр эффектов для каждого элемента. Для начала просто установите его, следуя приведенной ниже инструкции: 

Установка плагина

• Откройте панель администратора WordPress.
• Плагины » нажмите «Добавить плагин» .

• Введите в строку поиска «Image Hover Effects Ultimate»

• Выберите первый результат и нажмите «Установить сейчас» , чтобы начать загрузку.
• После завершения установки нажмите «Активировать» , чтобы начать использовать плагин.

Использование плагина WordPress «Эффекты наведения изображения»

• в вашей панели управления появится новое «Наведение на изображение»

• Нажмите на меню, чтобы открыть настройки плагина. 

• Выберите любые эффекты, которые хотите использовать. В этом уроке мы будем экспериментировать с эффектом «Увеличительное стекло» .
• После выбора эффекта вы увидите различные стили анимации.

Когда вы найдете подходящий вариант, нажмите «Создать стиль» .

• Появится всплывающее окно. Введите заголовок в «Имя» и выберите эффект из предложенных вариантов (1-й, 2-й или 3-й). Затем нажмите «Сохранить» , чтобы продолжить.
• Вы перейдете на новую страницу, где сможете настроить параметры, такие как высота, ширина и прозрачность. Поэкспериментируйте, чтобы найти оптимальный вариант.

• После того, как вы убедитесь, что настройки вас устраивают, нажмите «Редактировать» , чтобы настроить изображение.

• Появится еще одно всплывающее окно. Здесь вы можете настроить положение увеличения. 

• Вы также можете заменить изображение, нажав «Выбрать изображение» .
• После завершения всех настроек нажмите «Отправить» , чтобы сохранить эффект наведения курсора.

• Чтобы применить эффект к вашему сайту, скопируйте и вставьте шорткод в свою запись или страницу. 

• Теперь ваш простой эффект наведения курсора на изображение готов к использованию в любой части вашего сайта. 

Метод 2: Использование CSS

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

Начнём с чего-нибудь простого, например, с эффекта подчёркивания при наведении курсора. Если вы хотите добавить этот эффект в свою тему, выполните следующие простые шаги:

• Перейдите к записи, к которой вы хотите добавить эффект при наведении курсора.
• Добавьте изображение, нажав на кнопку «Обложка» в блоке «+» .

• Введите свой контент в «Обложка» . Здесь мы добавим заголовок и кнопку.

• Настройте шрифт и стили по своему вкусу.
• Сохраните страницу как черновик.
• Далее перейдите в «Внешний вид» на панели управления.

• Затем нажмите «Настроить» и перейдите в раздел «Дополнительный CSS» . Добавьте следующий код:

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• Нажмите «Опубликовать» , чтобы сохранить код.

• Теперь вернитесь к своему сообщению и выделите текст, к которому хотите применить эффект подчеркивания.
• Откройте «Расширенные настройки» на боковой панели блока и введите underline-hover в «Дополнительные классы CSS» .

• Сохраните страницу и просмотрите ее, чтобы увидеть эффект. 

Существует огромное количество эффектов при наведении курсора, поэтому выберите тот, который лучше всего подходит вашему стилю. Вы можете либо научиться писать CSS самостоятельно, либо найти примеры в сообществе WordPress. Всё это доступно!

Метод 3: Использование конструкторов страниц (например, Elementor)

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

Вы также можете использовать его для создания эффектов наведения курсора на изображения в WordPress. В этом разделе мы поэкспериментируем со встроенными эффектами наведения курсора в самом конструкторе страниц.

Чтобы настроить эффекты:

• Откройте Elementor из административной панели.
• Добавьте своё изображение.

• Выберите изображение, затем перейдите на «Стиль» .
• Прокрутите вниз и нажмите «Навести курсор» .

• В «Анимация при наведении курсора» вы найдете множество готовых к использованию эффектов.

• мы выбрали «Растущий» . Затем вы можете настроить длительность перехода, прозрачность и другие параметры в соответствии с дизайном вашего сайта.

• После завершения вы сможете сразу увидеть эффект, без необходимости предварительного просмотра. 

Метод 4: Использование плагинов Flipbox

Если вам нужен более быстрый способ, вы можете установить плагин Flipbox. Эффект Flipbox — это когда изображение переворачивается, открывая содержимое на лицевой или обратной стороне при наведении на него курсора.

Этот эффект отлично подходит для фотоснимков, где можно отобразить фотографию на лицевой стороне, а информацию о камере — на обратной. Но возможности безграничны.

• В панели управления WordPress перейдите в «Плагины» . Затем выберите «Добавить плагин» .
• Введите в строку поиска Flipbox

• Нажмите «Установить сейчас» , затем активируйте плагин.

• Чтобы создать рамку для перелистывания страниц, перейдите в Рамка для перелистывания страниц» и нажмите «Создать новую» .
• Выберите любую понравившуюся анимацию. После выбора нажмите «Создать стиль» .

• Появится всплывающее окно. Выберите желаемый макет (1-й, 2-й или 3-й) и введите заголовок. 

• Нажмите «Сохранить» , чтобы продолжить.
• Далее вы перейдете в меню настройки, где сможете установить эффекты и добавить свой контент.

• Прокрутите вниз, чтобы найти «Предварительный просмотр» . Нажмите «Редактировать» , чтобы настроить содержимое как лицевой, так и обратной стороны откидной коробки.

• После завершения нажмите «Отправить» , чтобы сохранить изменения.

• Чтобы добавить этот интерактивный блок на свою страницу, просто скопируйте и вставьте сгенерированный шорткод в любой раздел вашего сайта. 

• Вот и всё, готовое изделие! 

Метод 5: Использование блоков Gutenberg

Gutenberg — это стандартный блочный редактор WordPress, позволяющий добавлять эффекты при наведении курсора непосредственно в редакторе.

Хотя в нем, возможно, и нет расширенных эффектов при наведении курсора, вы можете улучшить анимацию, используя пользовательские CSS-стили.

В качестве примера давайте создадим простой эффект затухания при наведении курсора. Вот пошаговая инструкция:

• Перейдите к записи или странице, куда вы хотите добавить эффект наведения курсора.
• Нажмите кнопку «+» , чтобы добавить новый блок, затем выберите «Покрытие» .

• Внутри «Обложка» добавьте «Абзац» .

• Введите заголовок и краткое описание.
• При необходимости настройте размер шрифта, прозрачность, выравнивание и цвет.

• Затем выберите «Покрытие» , чтобы добавить пользовательский CSS-класс.
• Откройте «Дополнительно» на правой боковой панели.
• В поле «Дополнительный CSS-класс» введите fade-hover-effect .

• После этого сохраните страницу как черновик.

• Перейдите в «Плагины» и выберите плагин для создания фрагментов кода. В этом примере мы используем WPCode .
• Создайте новый фрагмент CSS-кода и вставьте в него следующий код:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

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

Этот эффект можно использовать повторно, добавив класс fade-hover-effect к любому блоку или изображению. Но если у вас много изображений, рассмотрите возможность использования плагина, например WP Media Folder для организации медиатеки в папки. Это упростит поиск и повторное использование связанного контента.

Влияет ли использование слишком большого количества эффектов на производительность?

Да, использование слишком большого количества эффектов при наведении курсора на вашем сайте может негативно сказаться на производительности, особенно если они не оптимизированы должным образом. Это связано с тем, что для некоторых эффектов при наведении курсора требуется дополнительный CSS-код. Размер CSS-кода вашего сайта может суммироваться и замедлять время загрузки страниц.

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

Заворачивать

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

Благодаря множеству способов добавления эффектов при наведении курсора — с помощью плагинов, пользовательских CSS-стилей или конструкторов страниц — у вас есть свобода выбора того, что лучше всего подходит именно вам. Экспериментируйте с различными стилями, чтобы найти тот, который лучше всего подходит для вашего сайта!