Оживающие фотографии при наведении на фото: Оживающие фотографии с дополнительной реальностью

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

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

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

Шаг 1. Добавьте фотомодуль на свою страницу

Прежде чем начать, обязательно установите и активируйте подключаемый модуль Beaver Builder. После этого в задней части вашего веб-сайта WordPress перейдите на вкладку Pages . Либо создайте новую страницу, либо выберите страницу, которую хотите отредактировать, и нажмите Launch Beaver Builder , чтобы открыть редактор.

Затем щелкните значок + в правом верхнем углу. Там вы добавите на свою страницу модуль Photo :

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

Шаг 2. Настройте модуль фотографий

Затем настройте модуль фотографий так же, как для любого изображения, которое вы добавляете на свой сайт. Для начала вы можете либо выбрать фотографию из своей медиатеки, либо использовать URL-адрес. При использовании Медиатеки выберите нужный размер фотографии:

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

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

Шаг 3: Введите пользовательский класс

После того, как вы настроили фотомодуль по своему вкусу, щелкните вкладку Advanced . Здесь вы найдете раздел HTML Element .

Прокрутите этот раздел до конца, пока не увидите поле Class . В этом поле вы вводите информацию о пользовательском классе для любого эффекта, который вы используете. В этом уроке мы используем эффект Hover Unblur, поэтому мы ввели «hover-unblur» в разделе класса:

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

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

• Увеличение при наведении: увеличение при наведении
• Уменьшение масштаба при наведении: уменьшение при наведении
• Уменьшение масштаба при наведении и поворот: наведение-уменьшение-поворот
• Размытие при наведении: Размытие при наведении
• Оттенки серого в цвет: градации серого-img
• Сепия в Цвет: sepia-img

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

Шаг 4. Добавьте CSS для эффекта на свой сайт

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

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

Чтобы добавить код CSS на свой веб-сайт, щелкните строку заголовка в верхнем левом углу и перейдите к Global Settings :

Затем перейдите к тегу CSS и вставьте код CSS. для желаемого эффекта. После сохранения изменений этот код появится в Инструменты > Глобальные настройки на каждой странице Beaver Builder. Более того, ваши правила CSS будут применяться ко всему контенту вашего сайта, даже к частям, созданным не с помощью Beaver Builder.

Если вы хотите применить CSS только к определенной странице, перейдите к Макет CSS и Javascript . Введите код на вкладке CSS и сохраните изменения.

Теперь вы можете увидеть свой первый эффект наведения! Обязательно наведите указатель мыши на изображение, чтобы убедиться, что оно работает правильно:

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

Заключение

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

Как мы видели, вы можете легко добавить любой эффект наведения с помощью нашего плагина Beaver Builder, выполнив следующие действия:

1. Добавьте фотомодуль на свою страницу.
2. Настройка фотомодуля.
3. Введите пользовательский класс.
4. Добавьте CSS для эффекта на свой сайт.

Какой ваш любимый эффект наведения? Дайте нам знать в комментариях ниже!

Как и в случае с вашей учетной записью Netflix, можно поделиться…

Об Уилле Моррисе

Уилл Моррис — штатный писатель WordCandy. Когда он не пишет о WordPress, ему нравится выступать со своими стендап-комедиями на местных каналах.

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

1. Посмотреть CRSA — 002

   CRSA — 002

2. Посмотреть эксперимент 001 панели навигации | Файзур

   Навбар Эксперимент 001 | Файзур

3. Просмотр эффектов искажения изображения с помощью фильтров SVG

   Эффекты искажения изображения с фильтрами SVG

4. Просмотр эффектов искажения изображения с помощью фильтров SVG

   Эффекты искажения изображения с фильтрами SVG

5. Посмотреть Загрузка

   Загрузка

6. Посмотреть эксперименты с переходами для выбранных произведений

   Избранные работы Переходные эксперименты

7. Посмотреть переход страницы галереи

   Переход страницы галереи

8. Посмотреть анимацию слайдера страницы галереи

   Анимация слайдера страницы галереи

9. Просмотр кругового изображения при наведении

   Круговое изображение при наведении

10. Просмотр информации при наведении

    информация при наведении

11. Просмотр компонента пользовательского интерфейса целевой страницы | Карточки блога с контентом

    Компонент пользовательского интерфейса целевой страницы | Карточки блога контента

12. Просмотр Gooey Image Hover Effects

    Gooey Эффекты наведения изображения

13. Просмотр изображения Показать эффекты при наведении

    Эффекты наведения на изображение

14. Посмотреть Саломон Лигтельм — 002

    Саломон Лигтельм — 002

15. Посмотреть эффект наведения при загрузке изображения

    Эффект наведения при загрузке изображения

16. Посмотреть экстремальное наведение

    экстремальное парение

17. Просмотр карточек товаров

    Карточки товаров

18. Посмотреть наведение и лайк

    Наведите и лайкните

19. Просмотр панели управления проектом

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

    Состояние наведения загрузчика изображений

21. Просмотр компонента узла

    Компонент узла

22. Посмотреть всплывающее меню ✨

    Выпадающее меню ✨

23. Просмотр взаимодействия с изображением при наведении

    Взаимодействие при наведении изображения

24. Подсветка кнопки просмотра

    Светящаяся кнопка

Зарегистрируйтесь, чтобы продолжить или войдите в систему

Идет загрузка…

Как добавить эффекты наведения изображения в WordPress (шаг за шагом)

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

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

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

Что такое эффекты наведения изображения?

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

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

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

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

• Увеличьте время, которое посетители проводят на вашем сайте
• Дайте вам творческие способы представления контента вашим посетителям
• Сообщите своим пользователям, что элемент сайта доступен для кликов

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

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

С плагином вам не нужно тратить время на редактирование, форматирование и добавление CSS для создания эффектов изображения. Это просто работает.

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

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

• Добавление эффектов Flipbox при наведении изображения в WordPress
• Добавление эффектов масштабирования и увеличения изображения в WordPress
• Добавление эффектов анимации изображений в WordPress
• Добавление всплывающих эффектов при наведении изображения в WordPress

1. Добавление эффектов флипбокса при наведении на изображение в WordPress

Флип-бокс — это бокс, который переворачивается при наведении на него указателя мыши.

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

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

Если вы фотограф, вы можете использовать это, чтобы продемонстрировать свои работы и разделить портфолио.

Самый простой способ добавить эффекты флипбокса — использовать плагин WordPress. Плагин позволяет быстро создавать и настраивать эти эффекты.

Мы рекомендуем использовать плагин Flipbox — Awesomes Flip Boxes Image Overlay. Это лучший флипбокс и плагин для наведения изображений для WordPress.

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

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

Подробнее см. в нашем руководстве по созданию оверлеев флипбоксов и ховеров в WordPress.

2. Добавление эффектов масштабирования изображения и увеличения в WordPress

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

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

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

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

Мы рекомендуем использовать плагин WP Image Zoom. Этот плагин позволяет вам просто добавлять эффекты масштабирования и увеличения к вашим изображениям.

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

Подробнее см. в нашем руководстве о том, как добавить увеличение для изображений в WordPress.

3. Добавление эффектов анимации изображения в WordPress

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

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

Чтобы добавить такие эффекты при наведении, мы рекомендуем использовать плагин Image Hover Effects Ultimate.

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

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

После того, как вы установили и активировали плагин, вам нужно нажать «Image Hover» в панели администратора WordPress. Это вызовет восемь различных эффектов наведения изображения, которые вы можете выбрать.

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

Сначала щелкните поле «Эффекты подписи». Это вызывает меню различных вариантов анимации на выбор.

Найдя нужный эффект изображения, нажмите «Создать стиль».

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

Не забудьте нажать «Сохранить».

На следующем экране у вас будет множество параметров для настройки эффекта наведения.

Однако мы оставим параметры анимации по умолчанию.

Если вы внесете изменения, они появятся в поле «Предварительный просмотр».

Чтобы изменить изображение по умолчанию, наведите курсор на изображение и нажмите «Изменить».

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

Чтобы загрузить свое изображение, щелкните поле под заголовком «Изображение» и загрузите или выберите изображение из своей медиатеки.

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

Когда вы закончите, нажмите «Отправить».

Чтобы добавить изображение на свой сайт, скопируйте шорткод в поле «Шорткод».

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

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

Приведенные выше плагины помогут вам добавить такие функции, как флип-боксы, эффекты наведения, анимацию и многое другое.

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

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

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

Мы рекомендуем использовать плагин CSS Hero. Этот плагин позволяет вам редактировать почти все стили CSS на вашем сайте WordPress, не написав ни строчки кода.

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

Подробнее об установке плагина читайте в нашем руководстве по установке плагина WordPress.

После установки плагина вам нужно будет нажать кнопку «Перейти к активации продукта».

Это поможет вам в процессе активации плагина.

После активации плагина вы можете приступить к настройке изображений.

Откройте страницу или запись с изображением или изображениями, которые вы хотите анимировать, и нажмите «CSS Hero» в верхней части страницы.

Откроется меню редактора, в котором вы можете добавлять различные эффекты CSS.

Мы собираемся добавить всплывающее окно с изображением при наведении. Сначала вам нужно нажать на изображение, которое вы хотите отредактировать, а затем нажать «Фрагменты».