Красивые эффекты при наведении на картинку (hover CSS)

Красивые эффекты при наведении на картинку (hover CSS)

Важной частью при проектировании интерфейса сайта является его интуитивно понятное использование, не игнорируйте и те части сайта, которые кликабельны.

Старый, но очень действующий способ - это изменить цвет кликабельной зоны и подчёркивания при наведении (hover).

Время идёт, и теперь с помощью CSS есть много способов, чтобы сделать эффект наведения, в частности и на изображение.

Предлагаю ознакомиться с несколькими интересными эффектами при наведении на картинку, которые позволят вашим пользователям ориентироваться на сайте с комфортом.

100+ эффектов при наведении на картинку

Более 100 hover эффектов включают в себя эффектное появление:

  • кнопки социальных сетей;
  • ссылки для перехода на страницу;
  • подробное описание.

See the Pen Pure CSS3 Image Hover Animations by Sahar Ali Raza (@mrsahar) on CodePen.

15 эффектов при наведении на картинку

Коллекция из 15 простых действий при наведении на изображение. Для эффектов наведения используется только HTML и CSS.

  • размытие;
  • поворот;
  • масштабирование;
  • скольжение;
  • оттенки серого;
  • прозрачность и другие эффекты...

See the Pen demo:CSS image hover effects by Naoya (@nxworld) on CodePen.

3D эффект при наведении на изображение

Очень классный hover, который определяет ваше последнее движение мыши. Описание изображения будет определяться на основе последней позиции курсора.

See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen.

Hover анимация

Красивый анимированный hover, где границы при наведении становятся анимированными.

See the Pen Hover Animation from UNIQLO by Chris Coyier (@chriscoyier) on CodePen.

Анимированные плитки при наведении

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

See the Pen Tiles with animated :hover by Christopher Grabinski (@chrisgrabinski) on CodePen.

SVG Hover эффект при наведении на изображение

Удивительный рентгеновский эффект прожекторного появления картинки при наведении. Эффект работает в браузерах Chrome, Opera и Safari.

See the Pen SVG clip-path Hover Effect by Noel Delgado (@noeldelgado) on CodePen.

Создание сайта

Актуально в 2017

Рекомендую

Оставить отзыв