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

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

Смена цвета

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

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

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

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

Смена позиции изображения и оттенка

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

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

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

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

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

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

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

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

Эффект теней

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

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