Multiple interactions on one area, interferance issue?

Hi! just started out with webflow and I’m trying to do a hover over interaction. couldn’t find an explanation in the forum. so here is my questio.

Im trying to do a hover over animation with blur effect to an image. then on top of that I would like to display a heading for this project. This is supposed to scale up and appear once you hover over the image holder. I nearly got it to work as demonstrated by my link below, but there are still some issues.

it works almost fine when hovering over the image only, but then stops the blureffect while hovering over the text. I assume this is beacuse the text is blocking the animation, and I’ve tried to put it in different div blocks to solve the issue. without success. I understand that you can use the z-dimension to layer divblocks but then again i dont understand how you could put the text underneath the picture while still having it visible above?

hope you get my issue here. new to the tool of webflow.
thanks in forehand!

https://preview.webflow.com/preview/onskin-projekt?utm_source=onskin-projekt&preview=874200120e7f229d27931e12b35fe80d


Here is my public share link: LINK
(how to access public share link)