Коротко: сделать картинку чёрно-белой в CSS очень просто — filter: grayscale(100%). Часто добавляют эффект при наведении: серое по умолчанию, цветное при :hover, с плавным переходом. Работает и для фоновых изображений, и для <img>, и для SVG.
Основные варианты
| Задача | Код |
|---|---|
| Полностью ч/б | filter: grayscale(100%) |
| Приглушить наполовину | filter: grayscale(50%) |
| Цвет при наведении | :hover { filter: grayscale(0) } |
| Плавный переход | transition: filter .3s |
Вкладки: примеры
img.bw { filter: grayscale(100%); }Работает прямо на теге изображения. Значение можно писать и как grayscale(1) — это то же самое.
.photo {
filter: grayscale(100%);
transition: filter .3s ease;
}
.photo:hover { filter: grayscale(0); }Классика для карточек сотрудников и галерей: серое фото «оживает» при наведении. Не забудьте про transition — иначе переключение будет резким.
.hero {
background: url("hero.jpg") center / cover no-repeat;
filter: grayscale(100%);
}Фильтр применится ко всему блоку, включая текст. Если текст не должен «сереть», вынесите изображение в отдельный слой:
.hero { position: relative; }
.hero__img {
position: absolute; inset: 0;
object-fit: cover;
filter: grayscale(100%);
z-index: -1;
}Кроме ч/б, полезны другие фильтры — их можно комбинировать:
.muted {
filter: grayscale(60%) brightness(1.05) contrast(1.05);
}
.blurred { filter: blur(4px); }Например, лёгкое затемнение под текстом или размытие фона под модалкой.
filter становится «контейнером» для позиционирования потомков: position: fixed внутри может вести себя иначе. Если это мешает — применяйте фильтр к отдельному изображению, а не к большому блоку.Практика: галерея с «оживлением»
- Задайте карточкам
filter: grayscale(100%). - Добавьте
transition: filter .3sи другие переходы. - На
:hoverи:focus-within—grayscale(0). - Проверьте на тач-устройствах: там нет hover, поэтому сделайте состояние и по фокусу.
- Проверьте производительность при большом числе карточек.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Text тоже почернел | filter на всём блоке | применять к картинке/слою |
| Нет плавности | нет transition |
добавить переход |
| На телефоне нет эффекта | hover недоступен | использовать :focus-within |
| «Ломается» фиксированный элемент | filter создаёт контейнер | вынести фильтр на картинку |
Проверьте себя
Вопросы и ответы
Через filter — нет, он применяется ко всему элементу. Для «частично ч/б» используют mask-image с двумя слоями или заранее подготовленное изображение.
Фильтры обрабатываются браузером и на слабых устройствах могут слегка нагружать графику. На больших галереях лучше ограничиться небольшим числом элементов с эффектом.
Да, filter применяется и к SVG, в том числе к инлайн-иконкам.
Переопределите фильтр у нужного элемента: filter: none или grayscale(0) — при условии, что фильтр задан не на родителе.
Итоги
- Ч/б —
filter: grayscale(100%). - Цвет при наведении —
grayscale(0)сtransition. - Фильтр на всём блоке «серит» и текст — применяйте к картинке.
filterсоздаёт новый контекст — учитывайте это сfixed.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.