CSS 3: наложение изображения при наведении ⇐ CSS

[Anonymous]

Я создал эффект изображения, при котором изображение увеличивается при наведении курсора, а наложенный текст остается того же размера. Сейчас я пытаюсь создать полупрозрачное темное наложение поверх изображения при наведении курсора, но эффект наложения не вступит в силу при преобразовании масштабирования. Кажется, что наложение тени конфликтует с масштабированием.
Это мой код:

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

.grid_container>.box-item,
.grid_container>.box-itemw {
width: 100%;
}

.box-item img,
.box-itemw img {
width: 100%;
}

.box-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
ms-transform: translate(-50%, -50%);
color: var(--white);
font-size: 20px;
}

.grid_container {
margin-top: 40px;
display: flex;
justify-content: center;
flex-wrap: wrap;
column-gap: 10px;
row-gap: 5px;
}

.grid_container>.box-item {
position: relative;
align-content: flex-start;
width: calc(33.33% - 40px);
}

.grid_container>.box-itemw {
position: relative;
align-content: flex-start;
width: calc(100% - 40px);
}

.box-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
ms-transform: translate(-50%, -50%);
color: var(--white);
font-size: 20px;
z-index: 999;
}

.box-item,
.box-itemw {
position: relative;
/* border: 1px solid red; */
display: inline-block;
max-height: 300px;
max-width: 100%;
overflow: hidden;
}

.service-image:hover,
.box-text:hover+.service-image {
transform: scale(1.1);
transition: all 1s;
}

.box-item:before {
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: inherit;
content: ' ';
overflow: hidden;
transition: .5s;
}

.box-item:hover {
background-color: rgba(0, 0, 0, 0.5);
}

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

[img]https://placehold.co/600x400[/img]

dummy text

Я пробовал различные комбинации кода, но не нашел решения. Будем очень признательны за любые предложения по поводу кода.

Подробнее здесь: https://stackoverflow.com/questions/783 ... er-overlay