Почему не разместить четыре одинаковых блока в разметке с позиционированием каждого от своей картинки?
Или этот блок при смене hover должен как-то перемещаться от картинки к картинке?
Если я правильно поняла вопрос, то блоку с картинкой задать относительное позиционирование.
Тогда координаты накладываемого блока будут считаться от него.
Мне сложно описать все нюансы в одном ответе.
Это, скорее всего, лучше будет передать поэтапно в онлайн-консультации, допустим, на примере выложенного Вами здесь куска кода.
Тогда можно попробовать с медиа-запросами и более сложной разметкой, пары блоков обернуть в обертку. Для каждой и в каждой прописать flex. При уменьшении ширины задать flex-direction: column.
Берется запросом.