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

Question

мой вывод -

I want -

But as you see, output is not exactly what i want. i want two picture to overlap at the same place, so a portion of one picture gets obscured by another picture

My css code -

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

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

my html code -

EDIT: After Khalil's suggestion, i used his code but the output is - введите описание изображения здесь

ОБНОВЛЕНИЕ: macK - палочка-выручалочка, его решение сработало для меня

Answer 1

Без изменения разметки вы можете установить оба изображения как position: absolute с и родительский div с position: relative с шириной и высотой.

Вам также может потребоваться отрегулировать положение двух изображений с помощью top bottom left и right затем размещение по своему вкусу и убедитесь, что вы установили меньшее z-index для фона.

.wrapper {
  position: relative;
  width: 400px;
  height: 400px;
}

.overlay {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 400px;
}

.background {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

<div class="wrapper">
  <img class="overlay" src="https://i.ya-webdesign.com/images/image-placeholder-png-2.png" />
  <img class="background" src="https://placehold.it/400x400" />
</div>

Если вы можете изменить разметку, в качестве альтернативы вы можете использовать background-image в CSS на элементе оболочки и сохранить дополнительный <img> элемент. Это был бы более семантически правильный способ добиться того, что вы пытаетесь сделать.

Answer 2

Попробуйте этот код:

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

.wrapper{
 width: 100%; 
 height: max-content;
 position: relative;
}
.shamne{
 width: 100%; 
 height: 100%;
 object-fit: cover;
}
.pichone{
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translate(-50%,0);
}