How to overflow the images on the previous ones?-CodePudding

I have several images and I want to make a presentation like on Facebook, by unwinding the images on the previous ones :

enter image description here

Here are my images, they are with a View Drupal 9 block :

enter image description here

I created the following CSS :

.block-views-blockgroup-subscribers-block-1 .view-content {
    display: flex;
    flex-direction: row;
    position: relative;
}

.block-views-blockgroup-subscribers-block-1 .views-field-user-picture img {
    border: 2px solid #f7f9fa;
    border-radius: 50%;
    transform: translateX(-25%);
}

But it doesn't work because the images are not displayed on top of the previous image.

How to overflow the images on the previous ones ?

CodePudding user response：

I think you need to say parent div to be flex, and reverse it. Reverse gives you the ability to avoid first image shift. Working example here

.image-container {
  display: flex;
  flex-direction: row-reverse;
}

.image-container img {
  border-radius: 100px;
  margin-left: -8px;
  border: 1px solid red;
}

CodePudding user response：

Here is the best method which I used. Hope You can use this method.

.default-avatar {
  background-color: #47d501;
  font-weight: 500;
  color: #fff;
  font-size: 1.6rem;
}

.default-avatar,
.member-overlap-item {
  height: 60px;
  width: 60px;
}

.member-overlap-item {
  margin-right: -10px;
  border: 2px solid #fff;
}

.group {
  min-height: 40px;
  height: auto;
  line-height: 1.6rem;
}

.grid-icon {
  vertical-align: middle;
  line-height: 1;
}

.group-class {
  height: 1rem;
  line-height: 4rem;
  vertical-align: middle;
}

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<div >
         <a >
              <div title="Baby Yoda"  style="background: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg) 0 0 no-repeat; background-size: cover;">
              </div>
              <div title="R2D2"  style="background: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/r2d2.jpg) 0 0 no-repeat; background-size: cover;">
              </div>
              <div title="Jabba the Hut"  style="background: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/jabba-the-hut.png) 0 0 no-repeat; background-size: cover;">
              </div>
              <div title="Chewbacca"  style="background: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/chewy.png) 0 0 no-repeat; background-size: cover;">
              </div>
              <div title="C-3PO"  style="background: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/c-3po.jpg) 0 0 no-repeat; background-size: cover;">
              </div>
            </a>
</div>