Css for responsive overlap images

Question

0.00/5 (No votes)

See more:

I trying to do responsive overlapping of images that will go to the next line based on the screen size. Instead of moving the images to a new line, it compresses the images and the distance between them. I would like the gap to remain the same and the images to go to a new line. My CSS is basic so hopefully, it's not horrible.

What I have tried:

CSS

.card-row-wrap {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.card-row-outer {
  display: block;
  top: 40px;
  width: 90%;
}

.card-row {
  position: relative;
  min-height: 220px;
  margin-bottom: 0px;
}

.card {
  float: left;
  position: relative;
  z-index: 100;
  cursor: pointer;
  width: 117px;
  margin-right: -117px;
  margin-bottom: 20px;
  border-radius: 9px;
  left: 0px;
  top: 20px;
  z-index: 100;
  display: inline;
}

.card img {
  height: 220px;
  border-radius: 10px;
  border: grey 2px solid;
}

.card:hover {
  top: 0px;
  filter: brightness(50%);
}

.card-oracle-image-hidden {
  display: none;
}

HTML

<div class="cards-row-wrap">
  <div class="card-row-outer">
    <div class="card-row">
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
      
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
    </div>
  </div>
</div>

Posted 28-Jan-21 23:39pm

Grambo2

Updated 29-Jan-21 6:25am

v2

Add a Solution

Comments

Richard Deeming 29-Jan-21 6:39am

The code you've posted wraps the images onto a new line for me:
Demo[^]

What's the problem?

Grambo2 29-Jan-21 7:03am

Ok, that's a bit frustrating. In codepen.io it doesn't wrap. Actually, if I put the div/spans back in it does work the same.

Demo

Richard Deeming 29-Jan-21 6:50am

NB: Your CSS doesn't match your markup. The CSS is expecting the <img> to be inside an element with class="card", not directly within the card-row element.

If you update your markup to match the CSS, then all of the images appear on top of each other:
Demo[^]

Grambo2 29-Jan-21 7:10am

Oh my gosh, I should've checked it when I pasted it. It didn't copy the spans around the images. Spans don't seem to show up but are eval'd

span class="card" style="margin-left: 4%;"

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2021-01-29T06:25:00

I'm guessing at the layout you want, but a combination of Flexbox and CSS transforms seem to work:

CSS

.card-row {
  display: flex;
  flex-wrap: wrap;
  min-height: 220px;
  margin-bottom: 0px;
}

.card {
  flex: 0 0 117px;
  z-index: 100;
  cursor: pointer;
  margin-bottom: 20px;
  border-radius: 9px;
}

.card img {
  height: 220px;
  border-radius: 10px;
  border: grey 2px solid;
  transform: translateY(20px);
}

.card:hover img {
  transform: translateY(0);
  filter: brightness(50%);
}

Demo[^]

Css for responsive overlap images

1 solution

Solution 1

Add your solution here

Preview 0

Css for responsive overlap images

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us