изображение неправильно перекрывается с другим изображением

Question

Мой вывод:

But I want the lower image to completely inline with the upper image thus creating a single image impression where lower part will be the lower image and upper part will be the upper image. EDIT: I want :

.shamne {
  width: 50%;
  position: relative;
  top: 0;
  left: 0;
}

.pichone {
  width: 50%;
  position: absolute;
  top: 0px;
  left: 20px;
}

<div class="col-md-3 col-lg-6 col-12 mb-4">
  <div>
    <img src="images/fake_m.png" class="shamne" />
    <img src="images/tamim1.png" class="pichone" />
  </div>
</div>

Answer 1

Вот что вы можете посмотреть:

скрипка , чтобы поиграть

.row {
  height: 300px;
  width: 300px;
  position: relative;
}

.shamne {
  width: 100%;
  height: 100%;
  border: 3px solid blue;
}

.pichone {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  border: 3px solid red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet" />

<div>
  <div class="row">
    <img src="http://placekitten.com/301/301" class="shamne" />
    <img src="http://placekitten.com/201/201" class="pichone" />
  </div>
</div>

Answer 2

Используйте позицию как position: absolute, а для второго изображения выберите z-index выше, чем у первого, надеюсь, это сработает