Максим

Это примерно так ...надо иметь в разметке блок который будет рядом с блоком который может иметь на него влияние либо вызывать событие mousemove на javascript

Ну и разумеется что z-index (любое позиционирование кроме static )который отобразит блок выше чем тот самый overlay

На css это делается так:

https://codepen.io/topicstarter/pen/XWbWzzy - так тоже можно - сделать обёртку для верхнего блока и для нижнего и этой обёртке установить фон - эту карту

.center-buttons:hover p{
  color: red;
}

.center-buttons {
display: flex;
align-items: center;
width: 10.6%;
background-color: red;
margin-right: 5px;
justify-content: center;
}

https://codepen.io/topicstarter/pen/rNByqoW вот кроссбраузерно = смотрите

https://codepen.io/topicstarter/pen/VwZpZrX

js_: https://codepen.io/topicstarter/pen/jONqdrw
js_multi level drop: https://codepen.io/topicstarter/pen/gOYrqRr
css_: https://codepen.io/topicstarter/pen/oNvYwQj

https://codepen.io/topicstarter/pen/gOYwZjB вот так

вот именно что ни какого css не надо

https://jsfiddle.net/Lq4xm3wv/ так ?

Топорное решение но думаю можно доделать это https://codepen.io/topicstarter/pen/oKaeMw
margin-left: и салам алейкум

https://codepen.io/topicstarter/pen/PMQYwE самый простой способ, только ширина одинаковая должна быть