Activate Hover On Lower Z-Index Objects

Hey, sorry for not explaining well. It’s complicated. I’m basically just trying to give thumbnails a hover color based on a specified category in the cms. So in a list of businesses, for example, restaurants would hover red, stores would hover blue, etc.

I’ve looked at other threads where people have struggled to set a hover color based on a cms value, and have been trying to Waldo’s approach here – Dynamic Color on Hover?

My issue is that when I place the “hover-color” object below the other information with a lower z-index number, the hover doesn’t activate in areas where the thumnail content goes above it. In my live link you can see that you can activate the hover only on the sides of the thumbnail where the content above it doesnt overlap.

I’m working now on the interaction approach, and am still having some issues. Not totally sure what I’m doing wrong, but if I’m able to pinpoint the issue there, I’ll report back. In the mean time, If yall know of any way aside from interactions to get the hover to activate when hovering across the entire thumbnail, that would be great!

Thanks!