how to ovelap a image on other image by styling scss in reactjs?

I have a design. In this design, one is overlapping on another image. I have created some code to try as given in the design. but it’s not working for me. Click here to find the design

Below is some line of code of components. that is tried by me

<div className="container">
  <Image className="container-img1" src={img1}/>
  <Image className="container-img2" src={img2}/>
</div>

below is a style in scss

.container{
  text-align: center;
  .container-img1{
     position: inherit;
     left: 0;
     top: 0;
     height: auto;
     border-radius: 50%;
     border: 3px solid grey;
     margin-right: -5rem;
  }
  .container-img1{
     position: inherit;
     left: 0;
     top: 0;
     height: auto;
     border-radius: 50%;
     border: 3px solid grey;
     margin-left: -5rem;
  }
}

Click Here to check what I have designed. but it’s not looking as given in design.

How can I style the same as given in Design? And should be responsive also.

Answer

To achieve the demo image you can eliminate the border with transparency for the img2 that has higher stack order in DOM.

.container-img1 {
  position: inherit;
  left: 0;
  top: 0;
  height: 7rem;
  border-radius: 50%;
  border: 3px solid grey;
  /* Reduce the margin so that the border aligns properly */
  margin-right: -1.1rem;
}

.container-img2 {
  position: inherit;
  left: 0;
  top: 0;
  height: 7rem;
  border-radius: 50%;
  border: 3px solid grey;
  /* Reduce the margin so that the border aligns properly */
  margin-left: -1.1rem;
  /* make it transparent */
  border-left-color: transparent;
}

To make it responsive, the image width seems very small but you need to adjust the width & margin according to the device size using media query.