Ключевые выводы
- Эффекты наведения изображения CSS в Elementor выполняют два шага: добавляют имя класса в виджет "Изображение" в разделе "Дополнительные" - "Классы CSS", затем вставляют правило CSS, нацеленное на этот класс.
- Пять эффектов наведения изображения CSS в этом руководстве - это увеличение внутри кадра, от оттенка серого до цвета, подъем с тенью, темная накладка и надпись, которая скользит вверх.
- В Elementor Pro есть Custom CSS-бокс на каждой вкладке Advanced виджета, а без Pro тот же CSS может войти в Appearance, Customize, Дополнительный CSS.
- Виджет Image от Elementor печатает свою подпись в виде подписи внутри фигуры, что делает возможным скользящую подпись только с помощью CSS.
- Изменения от оттенков серого до цвета и непрозрачности не требуют CSS в Elementor, поскольку на вкладке "Стиль" виджета Image уже есть CSS-фильтры и непрозрачность на вкладке "Наведение курсора".
Эффекты наведения изображения CSS работают в Elementor так же, как и в любом месте: класс на элементе и правило с :hover. Единственные части, специфичные для Elementor, - это места, где вы вводите класс и вставляете CSS. Ниже приведены пять эффектов, которые вы можете скопировать, каждый из которых протестирован на Elementor 4.3 со стандартным виджетом изображения.
Если вы предпочитаете не прикасаться к коду, в последнем разделе показан маршрут без кода с Виджет эффектов наведения изображения.
Оглавление
Как работают эффекты наведения CSS в Элементоре
Каждый сниппет ниже следует одному и тому же шаблону. вы даете виджету Изображения класс, и CSS меняет изображение внутри этого виджета, когда указатель находится над ним.
- Выберите виджет "Изображение" в Elementor.
- Открыть Продвинутый вкладка и поиск Классы CSS.
- Введите имя класса, например, без точки
hover-zoom. - Добавьте соответствующий CSS на свой сайт один раз. Любое изображение с этим классом затем получает эффект.
Класс приземляется на внешний элемент виджета, и изображение представляет собой img внутри него, поэтому правила нацелены .hover-zoom img.
Куда добавить CSS
У вас есть четыре места для вставки CSS, в зависимости от того, что установлено.
| Место | Потребности | Применяется к |
|---|---|---|
| Виджет, расширенный, пользовательский CSS | Элементор Про | Тот виджет |
| Настройки сайта, пользовательские CSS | Элементор Про | Весь сайт |
| Внешний вид, Настройка, Дополнительный CSS | Только WordPress | Весь сайт |
| Пользовательское расширение CSS | Мастер Аддоны | Элемент, к которому вы его добавляете |
Для занятий, которые вы планируете использовать повторно, лучше всего использовать место на всей территории. Пользовательское расширение CSS пейдж объясняет, как работает опция "Мастер-аддоны".
5 эффектов наведения изображения CSS для копирования
Каждый эффект имеет имя класса, CSS и снимок экрана результата до и во время наведения.
1. Увеличение внутри рамки
Изображение масштабируется, а его коробка остается того же размера. Название класса: hover-zoom.
.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); }
2. От оттенков серого до цвета
Изображение черно-белое и на зависании становится полноцветным. Название класса: hover-color.
.hover-color img { filter: grayscale(100%); transition: filter 0.4s ease; }
.hover-color:hover img { filter: none; }
3. Поднимать тенью
Изображение перемещается вверх на несколько пикселей и приобретает мягкую тень, как карта, которую берут. Название класса: hover-lift.
.hover-lift img { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover img { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18); }
4. Темное наложение
Темный слой затухает над изображением. оно построено с псевдоэлементом, поэтому дополнительная разметка не требуется. Название класса: hover-dim.
.hover-dim { position: relative; }
.hover-dim::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.hover-dim:hover::after { opacity: 1; }
5. Подпись, которая скользит вверх
Подпись самого изображения скрывается ниже нижнего края и скользит вверх на hover В виджете Изображение, набор Подпись в Пользовательские субтитры и введите текст первым. название класса: hover-caption.
.hover-caption figure { position: relative; overflow: hidden; margin: 0; }
.hover-caption figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 18px; background: rgba(0, 0, 0, 0.6); color: #fff; transform: translateY(100%); transition: transform 0.35s ease; }
.hover-caption:hover figcaption { transform: translateY(0); }
Это зависит от того, есть ли подпись. без подписи Elementor не печатает фигуру и подпись, а правилу нечего перемещать.
CSS или встроенные настройки наведения?
Проверьте собственные элементы управления Elementor, прежде чем писать CSS, ведь два из этих пяти эффектов существуют в виде настроек. на вкладке Стиль виджета Image есть вкладка "Наведение" с непрозрачностью, CSS-фильтрами и "Наведение анимации".
| Эффект | Встроен в Элементор? | Зачем использовать CSS |
|---|---|---|
| Серый цвет в цвет | Да, CSS-фильтры, насыщение | Один класс для множества изображений |
| Масштабирование | Частично. Расти увеличивается за рамку. | Чтобы сохранить зум внутри рамки |
| Поднимать тенью | Нет | У Элементора нет настроек для этого |
| Темная накладка | Нет, на виджете Image | Нужно, если вы не завернете изображение в контейнер |
| Скользящая подпись | Нет | Нужно, если вы не используете виджет наведения |
Встроенные настройки рассматриваются шаг за шагом как добавить эффекты наведения изображения в Elementor. Общая техника документирована Страница MDN для псевдокласса :hover.
Маршрут без кода
CSS подходит для простых эффектов на самом изображении. Как только вам понадобится заголовок и описание, которые оживляют изображение, CSS быстро растет, и вам придется поддерживать его при каждом изменении дизайна.
Виджет "Эффекты наведения изображения" в "Мастер-аддонах" заменяет его раскрывающимся. Он имеет 30 эффектов, заголовок и описание для каждого изображения, а также элементы управления вкладками "Стиль" для цветов и типов.
Увидеть их вживую. выше Страница виджета эффектов наведения изображения имеет восемь карт для зависания и таблицу из всех 30 эффектов.
Часто задаваемые вопросы
Как добавить эффекты наведения CSS к изображению в Elementor?
Выберите виджет Изображение, откройте вкладку Дополнительно и введите имя класса в CSS-классах. Затем добавьте правило CSS для этого класса с помощью:hover, например .hover-zoom:hover img { transform: scale (1.08); }.Вставьте CSS в пользовательский CSS Elementor Pro или в внешний вид, настройте, дополнительный CSS.
Куда мне поместить пользовательский CSS в Elementor без Pro?
Перейдите в Внешний вид, Настроить, Дополнительный CSS в панели управления WordPress и вставьте его туда. CSS загружается на каждую страницу, поэтому любой виджет с соответствующим классом берет его вверх. пользовательское расширение CSS из дополнения - это еще один вариант.
Почему мой эффект наведения CSS не работает в Elementor?
Обычными причинами являются точка, введенная в поле CSS Классы, имя класса, не соответствующее CSS, или кэшированная таблица стилей Введите класс без точки, сравните написание, затем очистите плагин кэша и файлы Elementor под Инструментами.
Могу ли я сделать изображение масштабируемым при наведении на паркет, не переполняя его?
Да. Установите переполнение скрытым на виджете, который несет класс и масштабировать img внутри него. виджет сохраняет свой размер и клипсует увеличенное изображение. первый фрагмент в этом руководстве делает это.
Работают ли эффекты наведения CSS на мобильных устройствах?
Телефоны не имеют состояния зависания, поэтому эффект либо никогда не показывает или показывает после касания и остается до тех пор, пока посетитель не коснется в другом месте. Относитесь к эффектам зависания как к украшению на небольших экранах и держите любой важный текст видимым без них.
Заключительные мысли
Эффекты наведения изображения CSS в Elementor требуют класса на виджете Image и короткого правила. Здесь пять охватывают масштабирование, цвет, подъем, наложение и скользящую подпись, и каждое из них можно настроить, изменив одно или два значения.
Когда нужный эффект включает текст поверх изображения, Виджет эффектов наведения изображения доставит вас туда без обслуживания CSS.
Связанное чтение
