Как предотвратить появление пробелов в наложении при наведении при преобразовании изображения в контейнере с помощью MUI ⇐ CSS

[Anonymous]

Я работаю над функцией, использующей пользовательский интерфейс Material (MUI), где у меня есть изображение внутри контейнера, которое смещается вправо при наведении курсора мыши. Контейнер также имеет наложение, примененное с помощью псевдоэлемента ::before. Эффект наведения работает так, как задумано, но когда изображение перемещается, слева остается пробел, цвет фона которого отличается от цвета изображения. Я думаю, что ответ состоит в том, чтобы сделать фоновый цвет родительских контейнеров таким же, как у изображения, но мне кажется, что я слишком усложняю ситуацию. Есть ли лучший способ сделать то, что я пытаюсь сделать?
Код (с использованием NextJS, NextJS/Imag, NextJS/Link и MUI):

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

Повторяем вышеизложенное:
Проблема:
Когда изображение смещается вправо при наведении курсора (transform: TranslateX(2rem)) , область слева, которая ранее была покрыта изображением, становится видимой, но ее цвет отличается от цвета фона изображения + цвета наложения.
Я попробовал добавить это в тег &:hover::before:

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

 left: "-2rem",
width: "calc(100% + 2rem)",

но это не сработало.
Есть ли способ динамически расширить наложение при наведении курсора мыши (редактировать: у этого вопроса неправильная формулировка - Есть ли способ расширить цвет фона изображения + цвет наложения при наведении курсора мыши? Даже это может быть неправильная формулировка.)? Я вообще правильно это делаю? Я новичок в NextJS/React и никогда не был большим экспертом по CSS.
Буду признателен за любую помощь или предложения!

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