mix-blend-modeに影響されない画像をその上に置きたい

Question

CSSのmix-blend-modeのmultiplyを使用して、hover時に背景画像に乗算で色がつくボタンを作成したいのですが、
その上にテキスト画像が乗っており、これにはmix-blend-modeの影響を受けてほしくありません。

やりたい事：
・hover時に載せた色を乗算で見せたい。
・しかし、その上にのっているテキスト画像は乗算させたくない（そのまま出したい）

以下、現状のソースです。
・hover時にテキスト画像も乗算になり見えなくなってしまう。

そもそも無理なのか、擬似クラスや他の表現で可能なのか、ヒントをいただけるとありがたいです。

<div class="box-picture">
<div class="nav-text>
<a href="">
<img src="images/nav-text.svg" alt="テキスト画像">
</a>
</div>
</div>

.box-picture{
width:100%;
height:500px;
background:url(images/bg.jpg);
background:cover;
position:relative;
}

.nav-text{
position:absolute;
top:0;
left:0;
}

.nav-text:hover{
background:#ff7bac;
mix-blend-mode: multiply;
}

.nav-text img{
width:100%;
height:auto;
}

Comments

[Lhankor_Mhy]

絶対配置などで上から重ねるのが無難なように思えましたが、すでにお試しになられましたか？

[M.Takeshita]

ありがとうございます！

試してはいるのですが、絶対配置のものも一緒にブレンドされてしまうのですよね。。構成を見直せばうまくいくのか、そもそもそういうものなかのか、今の時点では解決策が見つかっていません。。

Answer 1

自己解決というか、全く同じ事悩みの参考ページを見つけました！

ブレンドしたい要素を擬似要素にする事で別扱いにできました。
https://cloud6.net/so/css/997547