Есть ли способ применить фильтр оттенков серого к остальной части страницы при наведении курсора на элемент? ⇐ CSS

[Anonymous]

Я новичок в этом деле и пытаюсь настроить свой профиль на веб-сайте, поддерживающем кодирование html/css. Я понял, как переводить изображения в оттенки серого до наведения, но мне интересно, есть ли способ перевести остальную часть страницы в оттенки серого при наведении, чтобы изображение было единственным цветным элементом.
Все, что я пробовал, в буквальном смысле просто бросало что-то в стену и смотрело, прилипнет ли оно, поскольку я даже не знаю, с чего начать с чего-то подобного, поэтому я не верю, что добавление моих неудачных попыток окажет какую-либо помощь. Ниже приведен мой текущий код изображений, все они имеют один и тот же идентификатор CSS.

Код: Выделить всё

.img{
filter: Grayscale(100%);
}

.img:hover {
transform: scale(X);
filter: drop-shadow(Xpx Xpx  #xxx) !important;
filter: Grayscale(0%);
}

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

Подробнее здесь: https://stackoverflow.com/questions/786 ... e-when-hov