Как изменить эффект фильтра определенной части изображения внутри контейнера при наведении курсора на блок? ⇐ Html

[Anonymous]

У меня есть контейнер div с фоновым изображением, и внутри этого контейнера есть несколько блочных элементов фиксированного размера. Я хочу добиться следующего эффекта:

• Контейнер имеет полное фоновое изображение, и это изображение изначально отображается в оттенках серого (фильтр: оттенки серого (100 %)).
• Каждый элемент блока должен отображать часть фонового изображения контейнера, и эта часть должна сначала отображаться в оттенках серого, а также каждый раз. блок будет содержать текстовые данные или кнопки, НО в данном примере это не важно.
• При наведении курсора на блок только часть изображения внутри блока должна быть «не в оттенках серого» (т. е. изменить фильтр оттенков серого на 0%), а остальная часть фона контейнера остается неизменной и по-прежнему отображается в оттенках серого.
• Основное требование заключается в том, что только часть изображения, видимая внутри блока, должна быть на него влияет фильтр оттенков серого, и блок не должен выходить за пределы его границы.

Вот подход, который я пробовал до сих пор (включая часть кода):

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

.container {
position: relative;
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
background-image: url('image.jpg');
background-size: cover;
background-position: center;
filter: grayscale(100%);
}

.block {
width: 250px;
height: 400px;
position: relative;
overflow: hidden;
border: 1px solid #ccc;
}

.block::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: inherit;
background-size: cover;
background-position: center;
filter: grayscale(100%);
transition: filter 0.3s ease;
}

.block:hover::before {
filter: grayscale(0%);
}

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

Что мне нужно:

• Фоновое изображение в контейнере должно оставаться неизменным, при этом все изображение изначально должно быть в оттенках серого.
• При наведении курсора должна отображаться только часть фонового изображения внутри блока. удалить эффект оттенков серого, а остальная часть изображения останется в оттенках серого.
• Часть изображение внутри блока должно точно соответствовать той части изображения, которая видна в контейнере.

визуальный пример наведения курсора на каждый блок

Подробнее здесь: https://stackoverflow.com/questions/793 ... a-containe