Web5X - Готовые сайты

Блог о создании сайта, конструкторе сайтов и Elementor

эффект наведения в конструкторе сайта

Эффекты «Наведения» на сайте

Создавая сайт разной направленности и назначения мы всегда стараемся немного его "приукрасить".  Самый простой и популярный эффект это эффект при наведении курсора мыши на объект (hover эффект). Таким образом, когда мы наводим курсор мыши на объект с ним что то происходит. Давайте рассмотрим как и какие эффекты можно сделать в конструкторе сайта.

Смена цвета

Для секции нам необходимо добавить переход цвета, эффект перехода цвета в конструкторе сайта elementorпоэтому мы перейдем в свойства секции > вкладка Стиль - и в группе свойств Фон мы можем выбрать разный фон для обычного состояния так и для состояния при наведении.

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

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

Для этого нам достаточно абсолютно так же как и в предыдущем примере перейти на вкладку Стиль и выбрать в качестве фона черно белое изображение, а для опции "Наведение" выбрать в качестве фона цветное изображение.  Теперь у нас при наведении на фото ч\б оно будет сменяться на цветное.

Смена позиции изображения и оттенкапозиция фона в конструкторе сайта

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

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

Эффект изменения оттенка изображения

Давайте добавим еще и эффект наложения цвета. Итак, как мы уже увидели, когда вы устанавливаете цветовой переход, вы получаете хороший переход от одного цвета к другому. В изображении мы не получаем такого эффекта. Чтобы обойти это, нам необходимо добавить эффект наложения фона (перекрытие фона).

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

Эффект границы

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

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

Эффект теней

Когда мы выбираем группу свойств Граница, будь то на вкладке Стиль или Расширенные, мы можем выбрать тень для объекта. Добавив тень объекту мы получим эффект тени. Давайте теперь посмотрим на состояние Наведение и тоже добавим тень, но например с большим размахом. Теперь при наведении мы увидим как у объекта появляется тень или становится еще более объемный.

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

Эффекты «Наведения» на сайте: 2 комментария

  1. Когда делаю тень в предварительном просмотре все работает, а когда заходишь на сайт то не чего не отображается…

    1. Возможно просто в браузере нужно нажать CTRL+F5 для очистки кеша. Если не помогает, нужно смотреть более конкретно в инспекторе.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Реклама

Готовые сайты за 3000 рублей. Купить готовый сайт с конструктором это реально. А создать сайт можно дешево, быстро и просто. Купить сайт на web5x.ru

Конструктор сайтов Elementor Pro вы можете отдельно купить от 49$
Купить Elementor Pro

Блог о создании сайта, конструкторе сайтов и Elementor.
Авторские права © 2017-2023 . Все права защищены.
Готовые сайты на web5x.ru
Политика конфиденциальности