Kevin Powell - Community•15mo ago

How can I overlap these two images and keep the overlap responsive?

Hi, I am trying to replicate this design with two overlapping images and a vertical caption. The vertical caption should start in line with the bottom of the top-most image. I have first tried using position: absolute; on the images and setting their heights to 80%. Then setting image one to top: 0; left: 0; and image two to bottom: 0, right: 0;. This worked but wasn't great responsively. I thought maybe a grid would work better for this, however I'm still having trouble with responsiveness. Here is my current code using grid: https://codepen.io/CR53/pen/xxmpoPW Would love some help with this, been scratching my head over it for too long now 😄

CR53

CodePen

Overlapping Images

...

3 Replies

Mannix•15mo ago

i would remove styling from .caption-image-wrapper and remove width from .overlapping-images

VIG | Podnikatel33•15mo ago

I’d probably position them absolute. And use z-index property. Don’t forget to use position: relative on parent container.

MarkBoots•15mo ago

You could use grid to stack them, then there's no need for absolute positioned items and z-index. Something like this.

<div class="images">
  <img src="https://picsum.photos/400/400?random=1" alt="">
  <img src="https://picsum.photos/400/400?random=2" alt="">
</div>

<div class="images">
  <img src="https://picsum.photos/400/400?random=1" alt="">
  <img src="https://picsum.photos/400/400?random=2" alt="">
</div>

.images{
  display: grid;
  width: 50%;
  aspect-ratio: 1/1; /*square container*/
  border: 1px solid;
  padding: 2rem;
}
.images>img {
  grid-area:1/1; /*stack on top*/
  width: 80%; /*img size*/
  aspect-ratio: 1/1; /*square*/
  object-fit: cover; /*crop if img not square*/
  border-radius: 50% 0 0 0
}
.images>img:nth-child(2){
  place-self: end end; /*place bottom right */
  border-radius: 0 50% 0 0
}

.images{
  display: grid;
  width: 50%;
  aspect-ratio: 1/1; /*square container*/
  border: 1px solid;
  padding: 2rem;
}
.images>img {
  grid-area:1/1; /*stack on top*/
  width: 80%; /*img size*/
  aspect-ratio: 1/1; /*square*/
  object-fit: cover; /*crop if img not square*/
  border-radius: 50% 0 0 0
}
.images>img:nth-child(2){
  place-self: end end; /*place bottom right */
  border-radius: 0 50% 0 0
}

Gaming

Programming

How can I overlap these two images and keep the overlap responsive?