Ключевые выводы
- Эффекты наведения элементара для изображений живут на вкладке Стиль виджета изображения, под вкладкой Наведение с четырьмя элементами управления: Непрозрачность, CSS-фильтры, Продолжительность перехода и Анимация наведения.
- Эффект зависания от серого до цветного в Elementor не требует кода: установите значение насыщенности равным 0 в CSS-фильтрах на вкладке "Нормальный" и обратно на 100 на вкладке "Наведение".
- Пресеты Hover Animation от Elementor, такие как Grow, перемещают все изображение, а пресет Grow масштабирует изображение до 110 процентов от его размера при зависании.
- Виджет "Изображение" Elementor не может отображать заголовок или описание поверх изображения при наведении, поэтому для наложения текста необходим обход контейнера, пользовательский CSS или виджет-аддон.
- Виджет "Эффекты наведения изображения главных дополнений" имеет 30 именованных эффектов наведения, которые анимируют заголовок и описание поверх изображения, выбранного из одного раскрывающегося списка "Эффект наведения".
Вы можете добавить эффекты наведения Elementor на изображение тремя способами. виджет Изображение имеет настройки непрозрачности и CSS-фильтра для состояния наведения. Он также имеет предустановки Hover Animation, которые перемещают изображение. для заголовка и описания, которые появляются над изображением, вам нужен виджет, созданный для него, например Эффекты наведения изображения.
Это руководство охватывает каждый маршрут с точными настройками, проверенными на Elementor 4.3. Начните с первых двух, если вы хотите, чтобы изображение реагировало, и перейдите к третьему, если вам нужен текст на изображении.
Оглавление
Где настройки наведения находятся в Elementor
Выберите виджет изображения, откройте Стиль вставьте и посмотрите под раздел Изображение Ниже элементов управления размером находятся две вкладки, Нормальный и Навести на действие Все на вкладке Наведение применяется только в то время, когда указатель находится над изображением.Elementor объясняет идею в своем введение в эффекты зависания.
| Контроль | Что он делает на наведении курсора |
|---|---|
| Непрозрачность | Затухает изображение в или наружу, от 0 до 1 |
| CSS-фильтры | Изменения размытия, яркости, контрастности, насыщенности и оттенка |
| Переход Продолжительность | Устанавливает, сколько времени занимает изменение, в секундах |
| Наведите указатель мыши на анимацию | Играет предустановленное движение, такое как Grow |
Путь 1: Фильтры непрозрачности и CSS
Используйте фильтры непрозрачности и CSS, когда само изображение должно измениться при зависании. Классический пример - фотография, которая сидит в черно-белом цвете и превращается в цвет при появлении указателя.
- Выберите виджет Изображение и откройте Стиль.
- На Нормальный вкладка, щелкните карандаш рядом CSS-фильтры и перетаскивать Насыщение до 0. Изображение становится серым.
- Переключиться на Наведите курсор вкладка, открыть CSS-фильтры снова и установите насыщенность на 100.
- Набор Переход Продолжительность примерно до 0,4, поэтому цвет тускнеет.
- Опционально: установите непрозрачность на 0,85 на Normal и на 1 на Hover для небольшого осветления.
Те же две вкладки дают размытие, которое очищается, тусклое изображение, которое становится ярче, или сдвиг оттенка. сохраните переход между 0,3 и 0,5 сек. Короче, чем это выглядит как мерцание, и дольше ощущается медленно.
Путь 2: Пресеты Hover Animation
Hover Animation перемещает все изображение, когда указатель находится над ним. Это один раскрывающийся список внизу вкладки "Наведение", и он не нуждается в другой настройке.
- Выберите виджет Изображение и откройте Стильтогда Наведите курсор вкладка.
- Открытый Наведите указатель мыши на анимацию и выберите предустановку. Расти это тот, кого хочет большинство людей.
- Предварительный просмотр страницы и перемещение указателя по изображению.
Расти увеличивает изображение за пределы его исходных краев, поэтому оно может перекрывать своих соседей в плотной сетке. Если вы хотите, чтобы изображение масштабировалось внутри фиксированного кадра, это занимает несколько строк CSS.
Путь 3: Виджет текста поверх изображения
Используйте выделенный виджет, когда над изображением на hover должны появиться заголовок и описание Виджет "Изображение" Elementor показывает подпись под изображением и не имеет настройки для размещения текста сверху.
В этих шагах используется виджет "Эффекты наведения изображения" из главных аддонов.
- Отредактируйте страницу с помощью Elementor, найдите панель виджетов Эффекты наведения изображения и перетащите его на страницу.
- Под Эффекты и изображение, загрузите изображение.
- Открыть Эффект наведения выпадайте и выбирайте один из 30 эффектов. они перечислены по имени, начиная с Лили, Сэди, Рокси и Буббы.
- Введите Название и Описание в своих разделах.
- Набор Ссылки или всплывающие окна? если щелчок должен куда-то идти.
- На вкладке Стиль установите цвет наложения, непрозрачность изображения для нормального и зависающего, а также типографику для каждого текстового слоя.
Попробуйте эффекты, прежде чем что-либо устанавливать. выше Страница виджета эффектов наведения изображения имеет восемь живых карт, которые вы можете навести, плюс полный список из 30 эффектов.
Восемь эффектов работают без лицензии Pro, а 22 нужны Master Addons Pro. Каждый виджет содержит одно изображение, поэтому сетка карт наведения - это несколько виджетов рядом.
Видеоурок
В этом четырехминутном видео виджет "Эффекты наведения изображения" установлен с пустой страницы.
Каким способом следует воспользоваться?
Выберите, что должно измениться при наведении курсора: изображение, его положение или текст поверх него.
| Ты хочешь | Использовать | Потребности |
|---|---|---|
| От оттенков серого до цвета, от размытых до острых, от тусклых до ярких | CSS-фильтры и непрозрачность на вкладке "Наведение курсора" | Элементор |
| Изображение, которое нужно расти или пульсировать | Наведите указатель мыши на анимацию | Элементор |
| Зум, который остается внутри его кадра | Класс CSS и несколько строк CSS | Элементор и куда добавить CSS |
| Название и описание изображения | Виджет эффектов наведения изображения | Мастер Аддоны |
| Второе изображение, заменяющее первое | Расширенный виджет изображения или фон контейнера | Мастер Аддоны, или Элементор в одиночку |
Текст и изображения, объединенные другими способами, см Текст элементара поверх изображения.
Работают ли эффекты зависания на телефонах?
Не так наведите курсор, потому что на сенсорном экране нет указателя на зависание с. Эффекты вкладки Стиль Элементора не срабатывают на телефоне, что не вредит изменению цвета.
С виджетом Image Hover Effects первое касание обычно показывает текст, а второе касание следует по ссылке. если текст существенен, например цена или имя, поместите его где-нибудь видимым на маленьких экранах, а также.
Часто задаваемые вопросы
Как добавить эффект наведения на изображение в Elementor?
Выберите виджет "Изображение", откройте вкладку "Стиль" и переключитесь на вкладку "Наведение". Установите фильтры непрозрачности или CSS для состояния наведения или выберите анимацию наведения, например "Расти". Добавьте продолжительность перехода от 0,3 до 0,5 секунды, чтобы изменение было плавным.
Есть ли у Elementor эффекты наведения изображения без плагина?
Да. виджет изображения в Elementor имеет элементы управления наведением на непрозрачность, фильтры CSS и предустановку Hover Animation. Они меняют или перемещают изображение. Тексту по изображению необходим виджет дополнения или пользовательский CSS.
Как сделать так, чтобы изображение перешло от черно-белого к цветному на висении в Elementor?
На вкладке Стиль виджета изображения откройте CSS-фильтры на вкладке Нормальный и установите Насыщенность в 0. Затем откройте CSS-фильтры на вкладке Наведение и установите Насыщенность в 100.Установите Продолжительность перехода в пределах 0,4 сек.
Как показать текст при наведении курсора на изображение в Elementor?
Используйте виджет, созданный для него. с помощью главных дополнений добавьте виджет "Эффекты наведения изображения", загрузите изображение, введите "Заголовок" и "Описание" и выберите "Эффект наведения". Текст остается скрытым до тех пор, пока указатель не окажется над изображением.
Почему мой эффект зависания Элементора не работает?
Проверьте, что настройка находится на вкладке "Наведение", а не на вкладке "Нормальный", и что продолжительность перехода выше 0. На телефоне или планшете нет зависания, поэтому проверьте мышью. Если вы используете пользовательский CSS, подтвердите имя класса на виджете, соответствующее тому, что в коде.
Заключительные мысли
Эффекты наведения элементара для изображений бывают трех видов. вкладка Стиль меняет внешний вид изображения, Hover Animation перемещает его, и текстовому наложению нужен виджет.Начните со встроенных элементов управления, так как они ничего не стоят, чтобы попробовать.
Если вам нужен заголовок и описание на изображении, Виджет эффектов наведения изображения имеет 30 эффектов, готовых к выбору, и страница ценообразования показывает, какой план включает их все.
Связанное чтение
