CSS hover‑эффекты для изображений

Человек работает на MacBook Pro

Изображения с эффектами при наведении придают сайту завершённый вид и улучшают восприятие визуальных коллекций. Такие эффекты делают навигацию по галерее плавной и понятной. Главное преимущество: большинство эффектов можно сделать только на CSS — без JavaScript.

В этой инструкции вы найдёте пошаговые примеры HTML и CSS, несколько готовых эффектов и набор рекомендаций по тестированию, доступности и производительности.

Важно: эффекты нужно добавлять аккуратно — слишком сильный зум или размытие могут ухудшать UX, особенно на мобильных устройствах.

Что вы получите

Рабочий HTML‑шаблон для сетки изображений.
Несколько CSS‑эффектов: fade, blur, zoom, slide, grayscale.
Подсказки по доступности, тестам и совместимости.
Роли и чек‑листы для дизайна и разработки.

HTML: структура изображений

Создайте файл index.html в пустой папке и вставьте внутри тега body следующую разметку. Каждый блок — это контейнер с изображением и блоком текста (контент скрыт по умолчанию и появляется при ховере):

  
    
      

      
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad  
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel!  
      
    

    
      

      
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad  
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel!  
      
    

    
      

      
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad  
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel!  
      
    

    
      

      
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad  
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel!

Каждый .image-wrapper служит обёрткой для изображения и соответствующего текста. Классы на изображениях (.blur, .zoom, .grey) и на контейнерах контента (.fade, .slide-left и т. п.) позволяют комбинировать эффекты.

CSS: основные стили и компоновка

Подключите style.css в :

В style.css начнём с простого сброса и сетки.

body {  
  margin: 0;  
  margin-bottom: 20rem;  
}

.grid {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  
  gap: 1rem;  
  padding: 1rem;  
}

.image-wrapper {  
  position: relative;  
  overflow: hidden;  
}

.image-wrapper > img {  
  display: block;  
  width: 100%;  
  aspect-ratio: 1 / 1;  
  object-fit: cover;  
  object-position: center;  
  transform-origin: center center;  
}

.image-wrapper > .content {  
  position: absolute;  
  inset: 0;  
  font-size: 2rem;  
  padding: 1rem;  
  background: rgba(255, 255, 255, .4);  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  text-align: center;  
}

Примечание: я добавил gap и padding для аккуратного расстояния между карточками.

Переходы: единый тайминг

Чтобы анимации выглядели согласованно, задаём одинаковую transition для изображений и контента:

.image-wrapper > img,  
.image-wrapper > .content {  
  transition: 200ms ease-in-out;  
}

Это означает: все изменения (масштаб, фильтры, непрозрачность, трансформы) будут длиться 200 мс с кривой ease-in-out.

Эффект затухания и размытия

Чтобы реализовать появление текста (fade) и размывать фон, используйте такие правила:

.image-wrapper > .content.fade {  
  opacity: 0;  
}

.image-wrapper:hover > .content.fade {  
  opacity: 1;  
}

.image-wrapper:hover > img.blur {  
  filter: blur(5px);  
}

Теперь при наведении текст плавно появляется, а изображение под ним слегка размывается. По желанию увеличьте значение в blur(5px) для более сильного эффекта.

Дополнительные эффекты: slide, zoom, grayscale

Другие популярные эффекты — это сдвиг текста, масштаб изображения и приведение к оттенкам серого. В примере ниже исправлены распространённые опечатки (правильный фильтр: grayscale):

.image-wrapper > .content.slide-left {  
  transform: translateX(100%);  
}

.image-wrapper:hover > .content.slide-left {  
  transform: translateX(0%);  
}

.image-wrapper:hover > img.grey {  
  filter: grayscale(1);  
}

.image-wrapper:hover > img.blur {  
  filter: blur(5px);  
}

.image-wrapper:hover > img.zoom {  
  transform: scale(1.1);  
}

Вы можете добавить slide-up / slide-down / slide-right, изменив translateX на translateY или поменяв направление значений.

Скриншот сетки изображений

Примеры комбинаций и тонкая настройка

Лёгкое размытие + тёмная полупрозрачная панель текста — хорошо читается на ярких фото.
Зум лучше ограничивать (scale(1.05)–scale(1.15)), чтобы не создавать рывков при ресайзе.
Для мобильных устройств подумайте о том, чтобы эффекты запускались по касанию или отключались — касание и hover ведут себя иначе.

Доступность (Accessibility)

Обязательно добавляйте содержательные alt‑атрибуты для изображений. Если изображение декоративное — используйте alt=”” и предоставьте текстовую альтернативу в контенте.
Убедитесь, что контраст текста и фоновой области соответствует WCAG. Если фон полупрозрачный, проверяйте итоговый контраст.
Для клавиатурной навигации добавьте :focus стили аналогичные :hover, например .image-wrapper:focus-within > .content{ opacity:1; }

Производительность и оптимизация

Используйте оптимизированные изображения (WebP или адаптивные srcset) — эффекты не должны заставлять пользователя грузить полноразмерные файлы.
Фильтры GPU‑ускорены не всегда — test на целевых устройствах. Иногда transform: scale() работает быстрее, чем heavy filter.
Избегайте слишком больших значений blur на мобильных устройствах.

Браузерная совместимость и падения

Современные браузеры поддерживают transition, transform и filter. Для старых версий Internet Explorer эффекты могут не работать, поэтому предусмотрите graceful degradation: контент остаётся доступным, просто без анимации.

Тесты и критерии приёмки

Критерии приёмки:

При наведении текст появляется плавно (opacity) и остаётся читаемым.
Фильтры/трансформы применяются только к изображению внутри .image-wrapper, не ломая соседние элементы.
Эффект работает на четырех демонстрационных карточках без визуальных дефектов.
Клавиатурная навигация может вызвать те же визуальные эффекты (:focus-within).

Минимальные тесты (acceptance):

Навести мышью — проверить fade, blur, zoom.
Кликнуть / превратить в фокус — проверить :focus поведение.
Отключить CSS — убедиться, что весь текст остаётся доступным.

Чек‑лист по ролям

Дизайнер:

Выбрать направление анимации и степень размытия/масштаба.
Подготовить альтернативные изображения (мобильные версии).
Убедиться в читабельности текста при разных фото.

Разработчик:

Внедрить HTML‑структуру с правильными alt.
Сверстать CSS‑сетки и эффекты.
Протестировать на основных браузерах и устройствах.

Мини‑методология внедрения

Начните с базовой сетки и статичных картинок.
Добавьте один эффект (fade или blur) и протестируйте читабельность.
Подключите остальные эффекты по классу для A/B тестирования.
Мониторьте производительность и откатите, если FPS падает.

Шпаргалка: готовые классы

.blur — применяется filter: blur(…) на hover
.zoom — применяется transform: scale(…) на hover
.grey — применяется filter: grayscale(…) на hover
.fade — контент с opacity: 0 → 1
.slide-left / slide-up — контент выезжает из стороны

Пример расширения: slide-up и slide-right

.image-wrapper > .content.slide-up {  
  transform: translateY(100%);  
}

.image-wrapper:hover > .content.slide-up {  
  transform: translateY(0%);  
}

.image-wrapper > .content.slide-right {  
  transform: translateX(-100%);  
}

.image-wrapper:hover > .content.slide-right {  
  transform: translateX(0%);  
}

Скриншот изображения с включённой анимацией

Когда такие эффекты не подходят

Контент требует предельно быстрой загрузки и экономии процессора (например, сложные страницы на слабых устройствах).
Изображения — основное средство восприятия (например, магазины, где важно видеть мелкие детали) — сильный blur или zomm может мешать.

Резюме

Добавление hover‑эффектов для изображений — недорогой способ улучшить пользовательский интерфейс. Используйте простую структуру: .image-wrapper, изображение и .content. Комбинируйте классы для достижения нужного результата. Обязательно тестируйте на разных устройствах, контролируйте производительность и доступность.

Ключевые шаги: HTML -> базовый CSS -> переходы -> отдельные эффекты -> тесты.

Краткое резюме (повтор): эффект можно реализовать на чистом CSS; начните с fade/blur, добавляйте zoom и slide по потребности; всегда проверяйте доступность и производительность.