0

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 ?

eric55
  • 3
  • 1
  • You could use a negative `margin-left` value instead of `transform`. For instance: `margin-left: -8px`. – c0m1t Nov 21 '22 at 15:26
  • @c0m1t If I make a negative margin, all the images are offset by 8 px. I want them to overlap by -8px on the previous image and that the first image is not shifted. – eric55 Nov 21 '22 at 15:52
  • Your issue is that the first image is shifted due to the negative margin? If so set 0 as its margin. You can use [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child) CSS pseudo-class to select the first child, an `img` element in this case. [codesandbox](https://codesandbox.io/s/frosty-moore-ozf7ul?file=/src/styles.css) – c0m1t Nov 21 '22 at 15:56
  • This may help https://stackoverflow.com/questions/48916431/overlapping-overlaying-multiple-inline-images – dantheman Nov 21 '22 at 16:00

2 Answers2

0

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;
}
evilcore29
  • 54
  • 4
0

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 class="col-sm-9 col-md-11 col-lg-12 col-xl-12">
         <a class="route d-flex">
              <div title="Baby Yoda" class="rounded-circle default-avatar member-overlap-item" 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" class="rounded-circle default-avatar member-overlap-item" 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" class="rounded-circle default-avatar member-overlap-item" 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" class="rounded-circle default-avatar member-overlap-item" 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" class="rounded-circle default-avatar member-overlap-item" 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>
Chathura Jayasanka
  • 46
  • 3
  • Thank you it works, how to put the first image over the next and so on? – eric55 Nov 21 '22 at 17:00
  • Please check the class name and properties, .member-overlap-item { margin-right: -10px; border: 2px solid #fff; } – Chathura Jayasanka Nov 21 '22 at 17:08
  • forget about bootstrap. paste this css class to your stylesheet along with previous styles >> .route{ display: flex; } .rounded-circle { border-radius: 50%!important; } – Chathura Jayasanka Nov 21 '22 at 17:30
  • In your example, the overlay of images should be reversed with the first on top of the others... – eric55 Nov 21 '22 at 17:58
  • You can Use flex-direction: row-reverse >>> Ex: .route{ display: flex; flex-direction: row-reverse; } – Chathura Jayasanka Nov 22 '22 at 03:27
  • Yes, but it reverses the images and I want to keep the order – eric55 Nov 23 '22 at 10:03
  • Ordering your items using this >>> .route :nth-child(1) { order: 5; } .route :nth-child(2) { order: 4; } .route :nth-child(3) { order: 3; } .route :nth-child(4) { order: 2; } .route :nth-child(5) { order: 1; } reference : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items – Chathura Jayasanka Nov 23 '22 at 15:46