Красивые эффекты при наведении на картинку (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.