Can't figure the setup for this CMS Image grid

Hi Hello,

First post on a forum so apologies for any rookie moves.

I have an image grid that takes up the left 50% of the view width. It utilises izotope js and pulls the card image from a collection of portfolio works. Thats working, but what i’m trying to do with it is create a CMS card that appears on the right 50% linked to the collection item that’s hovered over in the image grid, and i’d like that card to appear and disappear locked-sticky in the same position on the right side of the screen when each image is hovered over, i just want the information on the right to switch and not move positions.

I’ve made a mock up of what i’m trying to achieve with colours in place of images/text
that can be viewed here:

The way it currently functions from what I can tell I cant have the hidden card cards adopt the cms information without adopting the 3 column structure of the image grid with it? thats my issue.

FYI for some reason you might need to click the preview button twice to have the interactions display.

Here is my public share link: