Эффекты наведения изображения Elementor: 30 анимаций наведения на действие для изображений
Статическое изображение просто сидит там Добавить эффекты наведения изображения и то же изображение начинает делать некоторые работы: заголовок сползает, описание затухает, и щелчок отправляет людей на ссылку или открывает полное всплывающее окно Виджет эффектов наведения изображения для Elementor поставляется с 30 анимациями наведения (8 в бесплатном плагине и еще 22 с Pro) и вы настраиваете их, не записывая строку CSS. Он подходит для мест, где одно изображение должно нести заголовок, подпись и действие: портфолио, командные сетки, сервисные карты, витрины продуктов.
Выберите эффект, выберите, что делает щелчок, и стиль каждый слой, чтобы соответствовать вашему дизайну. то, что вы в конечном итоге с карточкой изображения люди на самом деле останавливаются на вместо прокрутки мимо. видео ниже проходит через все это, показывает каждую анимацию, и настройка занимает пару минут.
Что такое эффекты наведения изображения?
Эффект наведения изображения — это анимация, которая срабатывает, когда кто-то перемещает мышь по изображению. Вместо того, чтобы оставаться ровным, изображение реагирует. Он может масштабировать, размытие, менять цвет или сдвигать текстовую панель в поле зрения. Наиболее распространенным видом является наложение изображения, где заголовок и описание появляются как текст поверх изображения. вы также увидите их под названием эффекты опрокидывания изображения или эффекты фотовведения, и все они делают одно и то же: берут простое изображение и заставляют его читать как “здесь больше, нажмите me.”
Вы можете построить все это вручную с пользовательским CSS. Это означает, что нужно писать переходы, заставлять их вести себя на мобильном телефоне и возвращаться в код каждый раз, когда дизайн меняется. виджет Master Addons обрабатывает его визуально внутри Elementor, так что вы получаете простые эффекты наведения изображения не открывая редактор кода. если вы хотите увидеть остальную часть инструментария, просмотрите Виджеты и расширения Master Addgets или Элементорные анимационные функции.
30 анимаций ховера, 8 из них бесплатные
Первые впечатления происходят на hover.Вы получаете библиотеку CSS анимации, которые приносят ваш заголовок и описание в плавно, поэтому текст приходит вместо того, чтобы просто поппинг на экран. Примените любой эффект одним щелчком мыши, затем циклически через них в редакторе, пока один подходит к изображению. Я обычно стараюсь три или четыре, прежде чем остановиться, так как эффект, который отлично выглядит на широком пейзажном кадре может чувствовать себя от плотного портретного урожая.
- Затухание и масштабирование: изображение затухает или масштабируется, а текст затухает.
- Слайд (вверх, вниз, влево, вправо): панель надписей вставляется с любого края.
- Нажмите и раскройте: изображение меняется, освобождая место для названия и описания.
- Плавайте и сияйте: небольшой подъемник и легкий размах по изображению.
- Восемь эффектов бесплатны: Лили, Сэди, Рокси, Бубба, Ромео, Лейла, Хани и Оскар. Pro добавляет еще 22, от Марли до Дюка.
- Работает на CSS: движение остается плавным, поскольку оно не опирается на тяжелые сценарии.
- Быстро протестировать: эффекты замены в редакторе и сразу увидеть изменение.
Примеры эффекта наведения изображения
Наведите указатель на каждую карту или коснитесь его на телефоне, чтобы увидеть эффект. Эти восемь эффектов, которые работают без Pro, и каждая карта является виджетом эффектов зависания в реальном времени.
Элла и Сэм
Сомерсет · Июнь
ландыш
Греция
11 дней
Сэди
главная этаж
Кардио и машины
рокси
привидение
12 400 миль
пьяница
утес
4 спальни · EPC B
Ромео
стена галереи
Бристоль · 2025
Лейла
Стартеры Девять блюд
мед
Верхняя одежда
87 штук
Оскар
Все 30 эффектов наведения изображения
В выпадающем списке эффекта наведения перечислены 30 эффектов по имени. Каждый анимирует название и описание изображения, а они отличаются тем, как двигаются наложение, текст и изображение.
| Эффект | Потребности про | Эффект | Потребности про |
|---|---|---|---|
| ландыш | Нет | Юлия | Да |
| Сэди | Нет | Голиаф | Да |
| рокси | Нет | герой | Да |
| пьяница | Нет | Уинстон | Да |
| Ромео | Нет | Селена | Да |
| Лейла | Нет | мах | Да |
| мед | Нет | Фиби | Да |
| Оскар | Нет | Аполлон | Да |
| марли | Да | кира | Да |
| рубин | Да | Стив | Да |
| милю | Да | Моисей | Да |
| ловкий | Да | джаз | Да |
| Сара | Да | звено | Да |
| Зои | Да | лекси | Да |
| шикарный | Да | герцог | Да |
Умное связывание и всплывающий контент нажатием
Вы решаете, что происходит, когда кто-то щелкает карту. укажите его на любом URL-адресе со стандартной ссылкой или, с помощью Pro, переключите действие на всплывающее окно и удерживайте людей на странице. Всплывающее окно также не ограничивается текстом: установите тип контента на Сохраненный раздел и он втягивает любой шаблон Elementor, который вы уже построили. Это превращает одну карту изображения в дверной проем к полной биографии, лист спецификации продукта или контактную форму, и посетитель никогда не покидает страницу.
- Два действия щелчка: отправляйте трафик по ссылке или оставляйте людей на месте с помощью всплывающего окна (Pro).
- Настоящие шаблоны во всплывающем окне (Pro): покажите изображение, текст или полный макет из вашей библиотеки.
- Дразнить, потом сказать: изображение представляет собой крючок, а всплывающее окно несет детали.
Текст над изображением: название, описание и стиль наложения
Вы контролируете, как карта смотрит с точностью до деталей. Загрузите свое изображение и установите его непрозрачность и фильтр отдельно для нормального состояния и состояния наведения. Добавьте заголовок (выберите правильный тег HTML, чтобы он помог структуре вашей страницы) и описание, затем стилизуйте каждую часть самостоятельно с помощью своих цветов, типа, теней и интервалов.
- Отдельное название и описание: создайте стиль каждого из них так, чтобы иерархия читалась ясно.
- Фильтры изображений: трюк с зависанием от оттенка серого до цвета по-прежнему выглядит хорошо и здесь является одноразовым изменением.
- Карточка: фон, границы и тень коробки, а также закругленные углы и набивка с помощью Pro, поэтому он находится прямо в вашем макете.
Параметры наведения элементар или виджет эффекта наведения изображения
В собственном виджете изображения Elementor есть настройки наведения на вкладке «Стиль»: непрозрачность, фильтры CSS и анимация наведения, например Grow или Pulse. Они меняют саму картинку. Они не могут помещать текст над изображением, который является пробелом, который заполняет этот виджет.
| Виджет изображения элементар | Виджет эффектов наведения изображения | |
|---|---|---|
| Непрозрачность при наведении | Да | Да |
| CSS-фильтры при наведении | Да | Да |
| Анимация наведения | Предустановки, которые перемещают весь образ | 30 эффектов, которые оживляют наложение, название и описание |
| Текст над изображением | нет , йо- Подпись сидит под изображением. | Название и описание на изображении |
| текст, который появляется при наведении | Нет | Да |
| Нажмите Действие | Ссылка или лайтбокс | Ссылка или всплывающее окно с профи |
| поменять на второе изображение при наведении | Нет | нет , использовать Расширенное изображение за это. |
Эффекты наведения изображения с первого взгляда
Основные факты о виджете в одной таблице.
| Особенность | Эффекты наведения изображения |
|---|---|
| Эффекты наведения | 30. 22 из них нуждаются в профи. |
| Текст на изображении | Название и описание, с тегом HTML от H1 до H6 для заголовка |
| Нажмите Действие | Нет, ссылка или всплывающее окно (PRO) |
| Всплывающее содержимое (PRO) | Текст, изображение или сохраненный раздел, виджет или шаблон страницы |
| Настройки изображения | Непрозрачность и фильтры, устанавливаемые отдельно для нормального и зависания |
| Второе изображение при наведении | Нет |
| Сенсорные экраны | Первое нажатие показывает текст. Второй кран следует по ссылке. |
| Потребности | Элементор и Мастер-аддоны |
Как добавить эффекты наведения изображения в Elementor?
Вы можете иметь работающую карту наведения менее чем за две минуты. Нет CSS, нет коротких кодов.
- Установите и активируйте главные дополнения, а затем отредактируйте любую страницу с помощью Elementor.
- Найдите на панели виджетов Эффекты наведения изображения и перетащите его на свою раскладку.
- Загрузите изображение и добавьте заголовок и описание.
- Откройте раскрывающийся список "Эффект наведения" и выберите анимацию. Восемь бесплатны, и еще 22 поставляются с Pro.
- Установите действие щелчка на ссылку или на всплывающее окно с сохраненным шаблоном, если у вас есть Pro.
- Создайте стиль названия, описания и контейнера, затем опубликуйте.
Перед публикацией стоит сделать одну вещь: просмотреть карту на телефоне. Наведение на курсор не существует на связи, поэтому проверьте, имеет ли поведение касания смысл (подробнее об этом в часто задаваемых вопросах). для каждого параметра, изложенного по порядку, следуйте инструкциям Документация Image Hover Effects.
Где использовать эффекты наведения на изображения?
- Командные сетки: имя и роль на hover, затем полная биография во всплывающем окне нажатия. Вот как построить раздел членов команды.
- Портфолио и галереи: название проекта и ссылка “View case study” над каждой фотографией.
- Сервисные карты: краткое описание и ссылка на страницу обслуживания.
- Витрины продукции: дразните изображение продукта, затем откройте характеристики во всплывающем окне.
- Плитки блога и категорий: подпись на зависании навигации на основе изображений.
Чтобы узнать больше о способах объединения текста и изображений, прочтите 25 Элементорных методов преобразования текста в изображение. Виджеты связанных изображений включают в себя Изображение Карусель, Фильтруемая галерея изображений, Точка доступа к изображению виджет и Расширенное изображение виджет.
Часто задаваемые вопросы по эффектам наведения изображения
Будут ли эти эффекты зависания работать на мобильных устройствах?
Они созданы для рабочего стола, где есть мышь для наведения курсора На сенсорном экране эффект обычно срабатывает при первом нажатии, чтобы показать содержимое, а второй нажатие следует по ссылке или открывает всплывающее окно. поэтому запланируйте два нажатия на мобильный телефон и убедитесь, что текст остается читаемым, как только он отобразится.
Как создать простые эффекты наведения изображения без записи CSS?
Бросьте виджет "Эффекты наведения изображения" на свою страницу, загрузите изображение, добавьте заголовок и описание и выберите анимацию из раскрывающегося списка. То есть без CSS. Виджет пишет CSS для вас за кулисами, поэтому даже довольно вовлеченную карту наведения остается легко собрать.
Могу ли я открыть биографию команды или подробную информацию о продукте во всплывающем окне при нажатии?
Да, с Pro. Поставьте имя в Заголовок и роль в Описание, установите действие щелчка на Всплывающее окно, и выберите Тип контента: Сохраненный раздел. Постройте биографию как шаблон в Elementor и выберите здесь. Нажмите на фотографию и этот полный макет откроется во всплывающем окне.
Все 30 эффектов наведения изображения бесплатны?
Нет. восемь эффектов бесплатны: Лили, Сэди, Рокси, Бубба, Ромео, Лейла, Хани и Оскар. остальные 22 поставляются с Master Addons Pro, наряду с всплывающим контентом, закругленными углами и элементами управления заполнением. название, описание, ссылка и фильтры изображений все работают в бесплатной версии.
Как показывать текст, когда кто-то нависает над изображением в Elementor?
Добавьте виджет эффектов наведения изображения, загрузите изображение, введите заголовок и описание и выберите эффект наведения. Текст остается скрытым до тех пор, пока указатель не окажется над изображением, а затем оживит. В собственном виджете изображения Elementor нет настройки текста поверх изображения.
Затормозит ли мой сайт множество анимированных карт изображений?
Эффекты работают на CSS, поэтому горстка на странице не проблема. Что на самом деле замедляет ситуацию, так это вес изображения, поэтому сначала сжатие изображений. Как только вы пройдете 20 или около того карт на одной странице, включите ленивую загрузку, и первая краска останется быстрой.
Могу ли я использовать разные эффекты наведения на разные изображения?
Настройки охватывают одну карту за раз. чтобы смешать эффекты, добавьте отдельный виджет Image Hover Effects для каждого изображения и настройте их независимо. так вы получаете галерею, где карты не все анимируются одинаково.
В чем преимущество "Сохраненного раздела" во всплывающем окне перед простым текстом?
Сохраненный раздел - это опция Pro, и он дает вам полный редактор Elementor внутри всплывающего окна. Вместо обычного текста вы можете добавлять изображения, кнопки, столбцы, видео или формы, поэтому всплывающее окно выглядит как остальная часть вашего сайта, а не как простое текстовое поле.
Как увеличить изображение при наведении в Elementor?
Для простого увеличения выберите виджет Elementor изображения, откройте вкладку «Стиль» и установите «Анимация наведения на наведение». В виджете эффектов наведения изображения несколько эффектов масштабируются изображением, когда входят заголовок и описание.
Можно ли изменить изображение при наведении?
Не с этим виджетом. Он сохраняет одно изображение и анимирует наложение и текст поверх него. Чтобы поменять местами на второе изображение, используйте Расширенное изображение Виджет и включите отображение изображения наведения.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Дубликатор сообщений/страниц
