- This topic is empty.
June 7, 2016 at 6:29 am #242608
I have been trying to create an image gallery, without text (so no floating) with alternating left/right images, but where the image space overlaps (damn, this is hard to explain in words!). The image gallery should be scalable, so including the images. I have gotten this far, but I can never get the space between the images to respond correctly, and it keeps looking like a mess. Possibly I’m just looking too far for a solution. Maybe someone has a clue.
Here’s what I have (i have given the images a size, for clarity):June 7, 2016 at 7:51 am #242618
An image of the intended design would be of more help….especially since your local images won’t show up in Codepen.June 7, 2016 at 8:09 am #242619
ok, here it is:
June 7, 2016 at 8:27 am #242624
Ok….is the order important?
Is the vertical alignment of the right hand side images important?
Such as, do the right hand images need to be aligned exactly with the gap between the left hand images?
Do you have control over the height of the images?
hmmmm, sort of, they are random images that I want to puzzle together in this sort of gallery concept, which I managed to do, however, when I scale the browser window, the space between the images never stays put, nor does their position to each other. So what I want is that the whole layout scales together, equally.June 7, 2016 at 8:50 am #242626
Probably a version of Masonry.jsJune 8, 2016 at 7:11 am #242670
What I did is I created two image with the background color, and used these to fill in the gaps on both side, and then just a margin on the images. As long as the images combined have the same pixel count on both side, it fits like a dream, and scales down perfectly too.
- The forum ‘CSS’ is closed to new topics and replies.