Olha vou te dar duas opções.
O resultado será ese, apesar de serem duas técnicas diferentes o resultado visual é o mesmo:

Opção 1
Como vc disse que não era possível fazer com uma div
dentro da outra eu fiz esse modelo para vc poder dar uma estudada nele e ver que sim é perfeitamente possível fazer o efeito usando uma div
dentro da outra.
Vc apenas precisa que a div
pai tenha position:relative
e a div
filha seja position:absolute
, dessa forma a referencia do filho fica dentro do escopo do pai. No seu caso como vc quer fazer o efeito em um link <a>
eu coloquei uma div
dentro do <a>
e setei os postions
.
Segue o exemplo do código.
a {
display: flex;
position: relative;
width: 300px;
height: 100px;
justify-content: center;
align-items: center;
background-image: url(https://picsum.photos/300/100);
background-size: cover;
color: #f00;
font-size: 2rem;
text-decoration: none;
text-shadow: 0 0 2px black;
}
a div {
transition: background-color 300ms;
}
a:hover div {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(43, 80, 142, 0.9);
}
a span {
position: relative;
z-index: 2;
}
<a href="#">
<div></div>
<span>Lorem, ipsum dolor.</span>
</a>
Opção 2
Essa opção ainda é mais simples que a primeira, eu particularmente optaria por ela.
Aqui o que eu fiz foi usar um box-shadow
que em vez de crescer para fora ele cresce para dentro do elemento, para fazer o box-shadow
crescer para dentro vc precisa usar um inset
e um valor bem grande de spread-radius
vc pode ler mais sobre essa propriedade aqui. https://developer.mozilla.org/pt-BR/docs/Web/CSS/box-shadow
Segue o código
a {
display: flex;
position: relative;
width: 300px;
height: 100px;
justify-content: center;
align-items: center;
background-image: url(https://picsum.photos/300/100);
background-size: cover;
color: #f00;
font-size: 2rem;
text-decoration: none;
text-shadow: 0 0 2px black;
transition: box-shadow 300ms;
}
a:hover {
box-shadow: inset 0 0 0 10000px rgba(43, 80, 142, 0.9);
}
<a href="#">
Lorem, ipsum dolor.
</a>