Hover interaction for a custom nested collection

Hi community,

I’m developing this website for my friend’s studio, but I got stuck when trying to finish the last 2 pages (Home and Project individual page).

Context
I’ve created 3 CMS collections: Projects, Categories, and Collaborators. I need to show each project’s Categories and which Collaborators participated.

Project pages
I’m not using the Project CMS template page because each project has a slightly different layout.

At the bottom of each project page, we have a section for the Related projects.
The problem is I need to show 2 nested collections (Categories & Collaborators) inside the Project parent collection. The Collaborators are hidden by a hover interaction, so I thought about creating a component so I don’t need to relink the interaction targets every time I use this section on a different project page. So, I can’t create a component using Webflow’s native nested collection.

I managed to nest the Collaborators using Finsweet Attributes, but the hover interaction is not 100% right. Collaborators appear instantly at the first hover and disappear as a group. Also, the background blur effect of the Collaborator badge isn’t working. I wish it worked like the Projects page interaction where I was able to use the native solution.

Here is the published link with Related projects section test I made
Here is the published link with Projects intended hover interaction

Home page
I believe the solution for the problem above will help me with the layout for the Home page. Here, I need to use a section with a few projects followed by a static paragraph, which is followed by another section with projects.

Any ideas of how I could fix it or even if there are other ways of accomplishing the same results?


Here is my public share link: [LINK](Webflow - Tall,Piet Website)
(how to access public share link)