Search code examples
javascripthtmlcssmasonryjquery-isotope

How do I stack images vertically

enter image description here

I tried many times and they always have a set horizontal line to seperate them that I can't get through (like in google search)

my css

#gallery{
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: nowrap;

}
#gallery img{
  max-width: 100%;
  align-self: flex-end;
  padding: 5px;
  box-sizing: border-box;
}

I've tried adding flex grow and shrink to be 1, once i change the flex wrap to nowrap they just inflate to full size

I want to ultimately use this method to show the index images here http://setch.me/

Solution

  • The only way you can achieve the image stacking is using a Javascript.

    There's two Javascript libraries that does the magic for you.