How to show the canvas background as the background

Question

I am trying to implement a canvas background with the content over it.

here is the stackblitz demo

I want to show my content over that canvas. The problem here is that I am applying a hover effect over that canvas. But since it is in absolute position, I have to apply a z-index to see the canvas. But if I apply a z-index, I can't see the content under it. But if I put a higher z-index to the content, then I can't see the canvas at all, which is understandable. Also, I tried adding an opacity of less than zero, then I can see both the content and the canvas. But now the content events doesn't work since it's under the canva s.

I don't know whether I was able to describe the behaviour I want. It's been driving me bananas for weeks. I would highly appreciate any help. Also, I am using vue3 with vite.