I've had a think about your idea @MinewireNetwork about laying out the images in different sizes across the page for the gallery. I'm trying to figure out how to lay the light-boxes out in different sized squares, so that when the screen scrolls up, the overlays show, so that people know to touch on it on mobile devices.
Could anyone take a look what I've done so far and make any recommendations. Is what I'm doing the long winded way round it? I hope you can see what I'm trying to achieve?! I kind of understand the parent - child -relative - absolute rule from @vincent - you're a legend, do you ever sleep? But I'm not sure the way I've laid the text out inside the overlay is correct (I've just added a load of margin to the top of the heading).
I appreciate you're all busy, and help would be greatly welcomed as always!