Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS alternating image layout, overlapping space

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #242608
    janga
    Participant

    Hi all,
    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.
    Thanks !
    Here’s what I have (i have given the images a size, for clarity):

    http://codepen.io/anon/pen/WxQZrV

    #242618
    Paulie_D
    Member

    An image of the intended design would be of more help….especially since your local images won’t show up in Codepen.

    #242619
    janga
    Participant

    ok, here it is:

    #242624
    Paulie_D
    Member

    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?

    I confess, this is likely to be something javascript should be doing..especially as I doubt CSS would be adequate.

    #242625
    janga
    Participant

    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.

    #242626
    Paulie_D
    Member

    Then you’ll definely need javascript.

    Probably a version of Masonry.js

    http://masonry.desandro.com/

    #242670
    janga
    Participant

    Javascript is out of my league, but after sleeping over it yet another night, I found a solution; prehistoric measures to the rescue !
    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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.