Здравствуйте. Как можно реализовать сценарий, когда наводя курсор на кнопку у картинки сверху появлялся background определенного цвета?
Используйте псевдоэлемент у блока с изображением и картинкой и при наведении (hover) на этот блок стилизуйте псевдоэлемент как вам необходимо, в том числе укажите для него background, размеры и прочее.

Если же вам нужно чтобы background появлялся только при наведении на кнопку, то можете попробовать поменять порядок кнопки и картинки в разметке, а при помощи css развернуть их обратно чтобы остался прежний порядок - картинка, кнопка. И далее можно использовать комбинацию селекторов
.image:hover + .button::before {
    content: "";
    background-color: tomato;
}

Почему нужно использовать в селекторе + ? Потому что этот селектор выбирает следующий элемент с указанным селектором в разметке, а в css можно обратиться к следующим соседям которые лежат в разметке после элемента, но не перед. Таким образом в разметке, визуально и в стилях у нас всё будет так, как нам нужно.
почти получилось через селектор ~ тильда. Почти потому что пришлось картинку и кнопку местами поменять в разметке. А как развернуть их обратно в css не знаю))