How to display overlapped product images in a card by HTML/CSS

Question

My design goal is to display a pack of products with one image source. For example, 4 products are displayed together and overlapping. How can I display overlapped product images within a card div? Thanks!

.cardcenter {
  width:200px;
  height:300px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.distribute {
  position: absolute;
  height:300px;
  width:200px;
  display: flex;
  justify-content: space-around;
  background-color:red;
}

.productd {
        background-image: url("https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-color:yellow;
        width:200px;
        height:200px;
}

<section>
     <div class="cardcenter" >
        <div class="distribute">
          <div>
            <div class="productd"></div>
          </div> 
          <div>
            <div class="productd"></div>
          </div> 
        </div>
    </div>
</section>

question from:https://stackoverflow.com/questions/65847702/how-to-display-overlapped-product-images-in-a-card-by-html-css

Answer 1

Based on @G-Cyrillus's code, the following code is developed. Product image size is responsive to the number of inserted images.

If there is one image, it will be largest. As images are added, it will be smaller. If numbers of images is over 5, images will be displayed in the second line. I tried "display:flex" at first but it is using "display:grid". Thanks to @G-Cyrillus

var productcard = document.querySelectorAll("div.product-overlay");

for (i = 0; i < productcard.length; i++) {

    productcard[i].setAttribute("id", "box-" + [i]);
    var check = document.querySelectorAll('#box-'+ CSS.escape(i) + ' img');
    var nb = check.length * 2;
    var mgleft = -15;
    var offY = 20 ;
    var offX = 10 ;
     var imgwidth = 240;

    var repeatecount = check.length;
    if (repeatecount<6){
        imgwidth = 240- (20*(repeatecount-1)); 
        mgleft = -15-(check.length-1);
    } else {
        imgwidth = 150;
       mgleft = -13;
    }
    productcard[i].setAttribute('style', ' --repeat:'+ repeatecount + ' ; --offsety:' + offY + 'px; --offsetx:' + offX + 'px;  '+"--imagewidth:"+ imgwidth+ 'px;  '+'--marginleft:'+mgleft+ 'px;  ');        
}

:root {
    --imagewidth: 150px;
    --cardwidth: 200px;
    --cardheight: 300px;
    --padding: 20px;
    --marginleft: -15px;
}

body > div {
  display: flex;
  flex-wrap: wrap;
}
div.product-overlay img {
  width: var(--imagewidth);
  margin-left: var(--marginleft);
  filter:drop-shadow(-1px -1px 3px  )  
}

div.product-overlay {
  background: gray;
  height: var(--cardheight);
  padding: --padding;
  width: var(--cardwidth);
  display: grid;
  grid-template-columns: repeat(var(--repeat), var(--offsety)) 1fr;
  grid-template-rows: repeat(var(--repeat), var(--offsetx)) 1fr 20px;
  margin: 1em;
  border-radius:0.5em 0.5em 0.5em 0.5em;
  border: 0 px;
}

div.product-overlay :nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}
div.product-overlay :nth-child(2) {
  grid-row: 2;
  grid-column: 2;
}
div.product-overlay :nth-child(3) {
  grid-row: 3;
  grid-column: 3;
}
div.product-overlay :nth-child(4) {
  grid-row: 4;
  grid-column: 4;
}
div.product-overlay :nth-child(5) {
  grid-row: 5;
  grid-column: 5;
}
div.product-overlay :nth-child(6) {
  grid-row: 4;
  grid-column: 1;
}
div.product-overlay :nth-child(7) {
  grid-row: 5;
  grid-column: 2;
}
div.product-overlay :nth-child(8) {
  grid-row: 6;
  grid-column: 3;
}
div.product-overlay :nth-child(9) {
  grid-row: 7;
  grid-column: 4;
}
div.product-overlay :nth-child(10) {
  grid-row: 8;
  grid-column: 5;
}
div.product-overlay :nth-child(11) {
  grid-row: 9;
  grid-column: 6;
}


div[id].product-overlay > div {
  background:rgba(255,255,255,0.5);
  margin:-18px;
  border-radius:0 0 0.5em 0.5em;
  padding:0.25em;
  margin-top: auto;
  grid-row: 1 / span calc(var(--repeat) + 2);
  grid-column: 1 / span calc(var(--repeat) + 1) ;
}
p {margin:0;}

<div>
    <div class="product-overlay">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
    </div>
    
    <div class="product-overlay">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
    </div>

    <div class="product-overlay">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
    </div>

    <div class="product-overlay">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png"> 
    </div>

    <div class="product-overlay">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png"> 
    </div>

    <div class="product-overlay">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png"> 
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
        <img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png"> 
    </div>
</div>