Как сделать при наведении на картинку hover эффект

Hover — эффекты при наведении

Мы задали цвет фона и текста, радиусы закругления, размер шрифта, отступы. Для анимации используем transition: all 500ms ease, которое означает, что в нужный момент будут анимированы все свойства в течение 500 миллисекунд.

Горизонтальная заполнение

Полупрозрачный фоновый цвет постепенно заполняет кнопку при наведении. Обычно заполнение происходит с какой-то одной стороны и переход длится до тех пор, пока вся кнопка не будет заполнена.

Чтобы достичь такого результата, нужно использовать псевдо-элемент :before:

 button:before

Данный контент абсолютно спозиционирован и расположен в верхнем левом углу кнопки. Зададим ширину равную 0px, потому что именно этот параметр мы будем анимировать. Чтобы анимировать его, мы просто изменим его ширину:

 button:hover:before

Вертикальное заполнение

Если анимировать высоту, то заполнение произойдёт сверху.

 button:before < content:''; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: rgba(255,255,255,0.3); border-radius: 5px; transition: all 2s ease; >button:hover:before

Инвертирование цвета

Инвертируем цвет внутри кнопки и добавляем границу:

 button:hover

Пунктирная граница

Добавим границу у кнопки и инвертируем цвета:

 button < border: 3px solid #3a7999; >button:hover

Появление значка

При наведении значок плавно появиться слева от текста.

Подключим шрифт со значками Font Awesome.

Увеличим внутренний отступ, чтобы для значка было место, и добавим свойство overflow со значением hidden:

 button

Далее добавляем значок из шрифта Font Awesome в псевдо-элемент before и размещаем его за пределами кнопки:

 button:before

Осталось установить свойство left:

 button:hover:before

Купи что-нибудь

Эффект подпрыгивания

Для данной анимации установим несколько ключевых кадров (keyframes):

 @keyframes bounce < 0%, 20%, 60%, 100% < transform: translateY(0); transform: translateY(0); >40% < transform: translateY(-20px); transform: translateY(-20px); >80% < transform: translateY(-10px); transform: translateY(-10px); >> 

Подключаем созданную анимацию:

 button:hover

Искажение

В CSS3 появилась возможность использовать искажения:

 button:hover

3D-поворот

Самый сложный эффект. Используем поворот кнопки для отображения другого сообщения, которое мы добавим в псевдо-элемент after у нашей кнопки.

Зададим для свойства transform-style значение preserve-3d, чтобы все дочерние элементы кнопки находились в 3D-пространстве:

 button

Установим правила для псевдо-элемента after:

 button:after

Правила добавлены сверху, перед кнопкой, и выставлены такие же параметры width и border-radius, как и у самой кнопки. Что касается свойств трансформации, то в качестве опорной точки, относительно которой будет происходить трансформация, установлен нижний левый угол элемента и указано вращение по оси X со значением 90 градусов, чтобы элемент казался плоским. Сейчас осталось только создать анимацию при наведении:

 button:hover

Чтобы активировать данный эффект, переместим опорную точку трансформации в центр, а также повернём сам элемент, чтобы реализовать трансформацию.

Переходы с помощью :hover

При использовании псевдокласса :hover изменение стиля, к примеру, цвета фона, происходит мгновенно. Для плавной смены свойств предназначены переходы, которые делаются с помощью свойства transition — оно позволяет задать продолжительность и метод перехода.

Для начала рассмотрим простой пример, когда плавно меняется цвет ссылок при наведении на них курсора.

a < color: green; transition: 1s; >a:hover

Сперва задаём исходный цвет ссылок с помощью свойства color , добавляя его к селектору A . Там же вставляем свойство transition со значением времени перехода, в частности, 1s — это одна секунда. Ниже создаём стилевые правила с псевдоклассом :hover , которые будут применяться к ссылкам при наведении на них курсора мыши. Теперь смена цвета ссылок с красного на зелёный, и наоборот, будет происходить плавно в течение одной секунды. Чтобы задать время перехода, просто поменяйте значение transition (пример 1). Можно вставлять дробные числа (0.8s) или миллисекунды (800ms), помня, что в одной секунде тысяча миллисекунд (1s = 1000ms).

Пример 1. Плавное изменение цвета ссылок

Результат данного примера показан на рис. 1.

Рис. 1. Изменение цвета ссылки при наведении

Переходы можно добавлять не только к текстовым ссылкам, но и к другим элементам веб-страницы. В сочетании со свойством transform, задающим трансформацию, это позволяет делать разные эффекты. В примере 2 показан блок с картинкой внутри, при наведении на которую картинка увеличивается в масштабе. Для этого в стилях для используем свойство overflow со значением hidden , чтобы картинка при увеличении не выходила за пределы блока. К img добавляем свойство transition , а для img:hover задаём свойство transform .

Пример 2. Масштабирование картинки при наведении

Результат данного примера показан на рис. 2.

Рис. 2. Увеличение картинки при наведении

Здесь применяется строчно-блочный элемент, чтобы размеры соответствовали вставленной в него картинке. У изображений внутри блоков появляется небольшой отступ снизу, убираем его с помощью свойства display, добавляя его к селектору img .

См. также

• :focus на мобильных устройствах
• transform
• transition
• Анимация кнопок при наведении
• Анимация ссылок при наведении
• Виды ссылок
• Всплывающая подсказка
• Звёздные войны
• Использование :hover
• Множественные переходы
• Несколько псевдоэлементов
• Нормальное позиционирование
• Ориентация
• Переходы
• Переходы в действии
• Переходы и анимация
• Повёрнутые рамки
• Подсветка строк и колонок таблицы
• Псевдокласс :hover
• Псевдоклассы в CSS
• Работа с типографикой
• Селекторы CSS
• Состояния кнопок
• Сочетание с псевдоклассами
• Типы ссылок
• Трансформация
• Трансформация
• Трансформация в CSS
• Функции трансформации

Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?

Заменить одну картинку на другую при наведении на неё курсора мыши.

Решение

Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но в большинстве случаев вполне достаточно и CSS.

Псевдокласс :hover

Вначале разберём, как делается собственно сам эффект. Для этой цели используется псевдокласс :hover , он добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже :hover работает только со ссылками, тогда как другие браузеры понимают :hover и для других элементов. Так что для универсальности придётся помещать изображение внутрь контейнера . Сам рисунок добавляется и меняется с помощью стилевого свойства background . Алгоритм действий следующий.

1. Готовятся два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания.
2. Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевое свойство background со значением url(URI) , здесь URI — путь к графическому файлу.
3. Присоединяем псевдокласс к селектору A и снова включаем свойство background , но в качестве значения указываем замещающее изображение.
4. Чтобы ссылка была по размеру картинки, её следует превратить в блочный элемент с помощью свойства display со значением block , а также задать высоту и ширину ссылки.

На рис. 1 приведены два изображения: исходное (рис. 1а) и замещающее (рис. 1б).

а б

Рис. 1. Картинки для создания эффекта перекатывания

Остаётся собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к атрибуту href тега .

Пример 1. Использование псевдокласса :hover

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Эффект перекатывания с одним рисунком

Казалось бы имеется противоречие, ведь эффект перекатывания состоит в замене одного рисунка на другой, как же тогда обойтись одной картинкой? На самом деле изображений будет два (рис. 2), но храниться они будут в одном графическом файле.

Рис. 2. Изображение с двумя картинками

Смена одного рисунка на другой происходит сдвигом изображения по вертикали за счёт использования универсального свойства background или background-position , как показано в примере 2.

Пример 2. Изменение положения рисунка

HTML5 CSS 2.1 IE Cr Op Sa Fx

Для селектора A устанавливается фоновое изображение через свойство background , ширина ( width ) совпадает с рисунком, а высота (свойство height ) равна половине высоты изображения. В итоге первоначально должна отображаться зеленая вкладка целиком.

При наведении на ссылку фон смещается вверх на половину высоты картинки (40 пикселов) с помощью background-position и становится видна оранжевая вкладка.

Hover-эффект для изображения

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

Вот как это примерно выглядит на опубликованном сайте:

Добавление элемента Image hover

Для начала добавьте Кастомный блок из галереи блоков на свой сайт:

Наведите мышкой на пустую колонку и нажмите на неё, чтобы добавить элемент, а затем выберите Hоver-эффект во всплывающем окне:

. или добавьте Hоver-эффект как элемент к уже существующим блокам:

Настройки содержимого

Наведите курсор на элемент и нажмите на «шестеренку» в верхнем левом углу, чтобы открыть Настройки :

Во вкладке Контент вы можете загрузить новое изображение или выбрать его из галереи:

После добавления картинки вы можете её отредактировать — например, добавить фильтр либо наложение цвета:

Подсказка: обратитесь к статье Редактирование картинок, чтобы узнать более подробную информацию о том, как настроить их отображение.

Добавление hover-эффекта

Переключитесь во вкладку При наведении в Настройках :

Здесь вы можете включить элементы, которые будут появляться после того, как пользователи наведут курсор на изображение — заголовок, описание или кнопку — и изменить их выравнивание:

Примечание: вы можете сделать так, чтобы заголовок отображался на картинке даже без наведения курсора:

Вы также можете добавить наложение цвета или фильтр к изображению при наведении для лучшего отображения текста:

Добавление анимации

Во вкладке При наведении вы можете отдельно настроить параметры анимации для элементов и самого изображения:

Не забудьте опубликовать свой сайт, чтобы изменения вступили в силу.

Обновлено на: 25/02/2021

Была ли эта статья полезна?