Как сделать картинку чёрно-белой
Короткий ответ
filter: grayscale(1) убирает цвет:
<img src="/media/photo-400x250.jpg" alt="" width="200" style="filter: grayscale(1);">1 (или 100%) — полностью чёрно-белое, 0.5 — наполовину.
Цвет при наведении
Так часто оформляют логотипы партнёров и галереи:
<style>
.photo { width: 200px; filter: grayscale(1); transition: filter 0.4s; }
.photo:hover { filter: none; }
</style>
<img class="photo" src="/media/photo-400x250.jpg" alt="">Другие фильтры
Фильтры перечисляют через пробел, и применяются они по порядку:
<div style="display: flex; gap: 6px;">
<img src="/media/photo-200x200.jpg" alt="" width="90" style="filter: sepia(1);">
<img src="/media/photo-200x200.jpg" alt="" width="90" style="filter: brightness(1.3) contrast(1.2);">
<img src="/media/photo-200x200.jpg" alt="" width="90" style="filter: hue-rotate(120deg);">
</div>Фильтр меняет только то, как картинка нарисована, — сам файл остаётся цветным.
Частая ошибка
Ставят фильтр на карточку целиком, а не на картинку, — и серым становится всё: текст, кнопки, значки. Применяйте filter к самому img.
Функции из этого ответа
- filter — Графические эффекты элемента: размытие, чёрно-белый режим, яркость, тень по форме.
- transition — Плавно анимирует изменение свойства от старого значения к новому.
- <img> — Картинка.