Hey @Brando and @spirelli, thank you for your help.
I've understood more about positioning relative so thank you. I'm getting stuck by the interactions. Each of the blocks (Block 1) has some text (More info) that when clicked should popup the interaction called 'Special' or Special 2, Special 3 etc...
Each Block 1 has custom text within it and each 'Special' block has custom text, position and a different trigger. I am having trouble streamlining this process and it seems when I change the interaction on one, it changes it on another (very frustrating).
This is what I would like to achieve:
1. 'More info' text - enlarge on hover
2. 'Special' box fade appear on click of More Info
3. Cross arrow in corner closes on click
4. I don't want more than one pop-up open at once
Do I need to custom name each 'More info', 'Special' and 'close' button on the 12 box grid in order for this to work and is there a more efficient way? It is confusing me a lot, so any suggestions would be really helpful.
You'll notice the interactions works superficially for Special as I would like but not Special 2 and I can't understand why. There must be a simpler way than having to have 3 custom interactions per block popup.
Would really appreciate your help,