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).
Ah that’s brilliant, thank you Vincent! I’ll watch a few more times, but I get the idea. I didn’t know you could add a background image to the lightbox AND a gradient. It felt dirty when I added that much margin to it to align, but couldn’t get my head around which way to do it.
The effect I’m trying to create is like a mosaic of photos from one side of the screen to the other made up of different sized images, preferably square but not important. As I want the site to be image heavy, I wanted a gallery that was a little different to the usual scrolling ones, or just images in a row, but still intuitive to use.
I’ve put a slider in there for now, but I’d happily change it! Could you direct me to a tutorial please, or just give me a hint as to how that layout is created.
OK, I found that I could view it in the sandbox mode. I’m struggling to understand a couple of elements…
In your explanation, you say to change the CSS code to match whatever the name of the container is, yours is set to masonry_grid but you have no containers by that name (that I can see anyway).
I also can’t see how you got the images in there, as the div boxes have no background image set, and there is no image box inserted, just a text overlay. I’m missing something that’s probably really obvious, but I hope you could clear that up for me? Appreciate your patience!
The nice thing is, I’m starting to understand code layout a little better each day! Just a bit though.