Click interaction working in one collection, but not in another (identical) one

Design help Animations & Interactions
1

In the case studies tabs (bottom of the page) I made a simple interaction where you can click on any of the CMS items and an overlay will be displayed. In this overlay there is an exit button which has a “hide” interaction programmed.

However, this exit/hide interaction only works to close the overlays from the 3x3 grid of smaller case studies, not the larger, featured case study.

To see what I’m talking about:

  1. Go into preview mode
  2. Click on one of the smaller case studies (i.e. “Dexalot”) to open the overlay
  3. Click the exit icon and see that it hides the overlay
  4. Now click on the “Red Bull: BC ONE” case study and then try to exit out to see that it doesn’t work.

I’ve tried changing the target of the exit animation to target the specific canva-overlay element for the featured case study, the parent element of the canva-exit element, I’ve made sure that I’m able to click on the exit icon in DevTools and it confirms that I can.

I cannot figure out why two identical interactions, nested identical structures are behaving differently!

Here is my read-only link: LINK
Here is the published site: LINK

2

Solved—for some reason the click interaction was being blocked by having two hover interactions on the parent class of the overlay. I moved one of the hover interactions to the parent of that parent class and the exit interaction works now.

3

Never mind, this approach only worked for one of the two tabs. Now the exit button for the featured case study works in the Content section, but not the Experiential section.

Any advice would be greatly appreciated! I’m really baffled as to why this is happening with identical collections and interactions.