Ключевые выводы
- У Elementor нет единой настройки для изменения изображения при наведении, поэтому замена выполняется с фоном контейнера позади изображения или с помощью виджета, который принимает второе изображение.
- Безплагиновый способ изменения изображения при наведении в Elementor заключается в установке второго изображения в качестве фона контейнера и установке непрозрачности наведения виджета изображения на 0.
- Виджет расширенного изображения Master Addons меняет изображения на один переключатель - отображение изображения наведения, который находится в разделе "Наведение изображения" на вкладке "Контент".
- Пресет Hover Animation от Elementor Grow на зависании увеличивает изображение до 110 процентов, и изображение вырастает за исходные края.
- При наведении на изображение, которое остается внутри его кадра, требуется класс CSS на виджете изображения и три коротких правила CSS, которые масштабируют изображение внутри скрытого переполнения.
Чтобы изменить изображение при наведении на Elementor, вы помещаете второе изображение позади или внутри первого и открываете его, когда приходит указатель. Elementor может сделать это без плагина через фон контейнера, а виджет изображения наведения на действие делает это с помощью одного переключателя. При увеличении наведения на действие требуется один предустановленный параметр для базового масштабирования или несколько строк CSS для масштабирования, которое остается в его кадре.
Все четыре метода, представленные ниже, были построены и протестированы на Elementor 4.3.
Оглавление
Какой метод использовать
Два из этих методов меняют изображение местами и два увеличивают его. Внутри каждой пары один использует только Элементор, а другой быстрее или аккуратнее.
| Цель | Метод | Потребности | Код |
|---|---|---|---|
| Изменить на второе изображение | Фон контейнера плюс непрозрачность висения | Элементор | Нет |
| Изменить на второе изображение | Расширенный виджет изображения | Мастер Аддоны | Нет |
| Увеличьте изображение | Наведите курсор на анимацию: Расти | Элементор | Нет |
| Увеличение внутри фиксированной рамки | Класс CSS на виджете Image | Элементор и место для добавления CSS | Три правила |
Измените изображение на наведении на фон контейнера
Этот метод не нуждается в плагине Второе изображение является фоном контейнера, и первое изображение сидит поверх него как обычный виджет Изображение При наведении верхнее изображение затухает, а фон проскальзывает.
- Добавьте контейнер и установите его заполнение на 0.
- В контейнере Стиль вкладка, открыть Фон, выбрать Классический и загрузить изображение, которое должно появиться на hover.Установить Положение в Центр и Размер в Крышку.
- Перетащить Изображение сделайте виджет в контейнер и выберите изображение, которое должно отображаться первым.
- Выберите виджет "Изображение", откройте Стиль и переключитесь на Наведите курсор вкладка.
- Набор Непрозрачность до 0 и Переход Продолжительность примерно до 0,4.
Используйте два изображения с одинаковыми пропорциями. контейнер берет свою высоту из виджета Изображение, поэтому фон с другой формой обрезается.
Измените изображение при наведении с помощью виджета изображения наведения
Виджет с полем изображения наведения на поверхность выполняет ту же замену с одной панели. Шаги ниже используют Расширенный виджет изображения из Мастер Аддоны.
- Найдите на панели виджетов Расширенное изображение и перетащите его на страницу.
- В Изображение раздел, выберите основное изображение.
- Открыть Наведите изображение секция и включите Отобразить изображение наведения.
- Выберите второе изображение в появившемся поле.
- Предварительный просмотр страницы и наведение курсора.
Виджет также имеет ленту, ссылку и лайтбокс, который подходит для фотографий товаров: сначала вид спереди, вид сзади на ховере, с новой лентой в углу.
Хотите текст на ховере? Эффекты наведения изображения анимирует заголовок и описание на одном изображении, используя 30 эффектов на выбор.
Увеличьте изображение при наведении с помощью предустановки "Расти"
Самый быстрый зум - это предустановка Выберите виджет Изображение, откройте Стиль, переключитесь на Наведите курсор вкладка и набор Наведите указатель мыши на анимацию чтобы Расти. Изображение масштабируется до 110 процентов, пока указатель находится над ним.
Расти хорошо работает для одного изображения с пространством вокруг него. В плотной сетке он перекрывает изображения рядом с ним, поэтому используйте следующий метод там.
Увеличьте изображение на наведении курсора внутри его кадра
Для зума, который остается внутри собственного поля изображения, дайте виджету Изображение класс CSS и добавьте три правила. виджет сохраняет свой размер, и изображение масштабируется внутри него.
- Выберите виджет Изображение и откройте Продвинутый. В Классы CSS, тип
hover-zoom. - Добавьте CSS ниже на свой сайт.
.hover-zoom { overflow: hidden; border-radius: 10px; }
.hover-zoom img { transition: transform 0.4s ease; display: block; }
.hover-zoom:hover img { transform: scale(1.08); }
Куда идет CSS зависит от вашей настройки. Elementor Pro имеет на вкладке "Дополнительно" поле "Настраиваемый CSS". Без него используйте "Внешний вид", "Настройка", "Дополнительный CSS" в WordPress или Пользовательское расширение CSS в главных дополнениях. Измените 1.08 на 1.15 для более сильного масштабирования.
Четыре вещи, которые идут не так
Большинство проблем с этими эффектами возникают из-за размеров изображений и тестирования на неправильном устройстве.
- Два изображения имеют разные пропорции. своп затем скачет или посевы. экспортировать как на одной ширине и высоте.
- Увеличенное изображение охватывает близлежащий контент. Grow не имеет кадра. Используйте метод CSS, когда изображения расположены близко друг к другу.
- На телефоне ничего не происходит Сенсорные экраны не имеют зависания Убедитесь, что первое изображение работает в одиночку, потому что посетители телефона могут никогда не увидеть второе.
- Изображение зависания тяжелое Сжимать оба файла, потому что большое второе изображение может отображаться в виде пустой вспышки на первом зависании.
Часто задаваемые вопросы
Как изменить изображение при наведении курсора в Elementor без плагина?
Поместите изображение наведения на контейнер в качестве фона, затем поместите виджет изображения с первым изображением внутри этого контейнера. на вкладке Стиль виджета изображения откройте вкладку "Наведение на действие" и установите значение непрозрачности на 0 с продолжительностью перехода около 0,4 секунды.
Как увеличить изображение при наведении в Elementor?
Выберите виджет Изображение, откройте Стиль, перейдите на вкладку Наведение и установите Наведение анимации для роста Для масштабирования, которое остается внутри кадра изображения, добавьте в виджет CSS-класс и масштабируйте изображение с преобразованием внутри обертки, у которой переполнение установлено в скрытое.
Может ли виджет Image Hover Effects изменить изображение при наведении?
Нет. Эффекты наведения изображения хранят одно изображение и анимируют над ним заголовок и описание. Чтобы перейти ко второму изображению, используйте виджет "Дополнительное изображение" и включите "Отобразить изображение наведения" или используйте метод фона контейнера.
Почему мое изображение перекрывает другой контент при его увеличении?
Анимация Grow масштабирует все изображение за пределы своего поля. Дайте виджету Image класс, установите переполнение для скрытого на нем и масштабируйте элемент img внутри. Затем поле остается того же размера и ограничивает масштабирование.
Могу ли я изменить изображение продукта при наведении курсора в WooCommerce с помощью этого?
Эти методы работают на изображениях, которые вы размещаете в Elementor. сетки продуктов, созданные WooCommerce или виджетом продуктов, представляют собой другой случай и зависят от темы или виджета, который их печатает.
Заключительные мысли
Чтобы изменить изображение при наведении в Elementor, используйте фон контейнера с затухающим виджетом изображения или виджет с наведением поля изображения. Чтобы увеличить масштаб, используйте "Расти" для быстрого результата и класс CSS, когда изображение должно оставаться в кадре.
выше Расширенный виджет изображения обрабатывает замену на одной панели, и Эффекты наведения изображения покрывает текстовые наложения.
Связанное чтение
