Could I get a hand with an interactive, full-screen div?

Hi there! Ok so I am going to try to write out the issue but here’s a screen recording of me explaining the problem which I think will be much much easier to understand.

I have a div block set to be 100% of the screen so that I can put a border around the whole site. Unfortunately, this border div needs to be placed inside the collection list for me to be able to trigger it’s colors dynamically with animation (see below) and it’s Z index be set to the farthest away.

Is there any way to either disable this div from being seen as something on top of other things? I tried some various custom code stuff with pointer-events: none; but as someone who doesn’t know a lick of CSS, idk what I’m doing.

If not, perhaps there’s a way to “clip” the rest of the site so that it doesn’t overlap over the border?

Here’s a link to the site, if that’d be helpful.

Thank yoU!!!

While I have you, my next task is to figure out how to have an always-on border that “changes colors” to the hovered image. Any thoughts on that considering my current setup?