Div наложение поверх центрированных изображений

Question

Я пытаюсь наложить div (или span) на изображение, которое накладывается поверх другого изображения. Оба изображения отцентрированы и масштабированы, чтобы соответствовать. Мои изображения имеют высоту больше ширины, но они не имеют фиксированного размера. Я бы хотел, чтобы div точно соответствовал HigherImg (то есть имеет те же размеры и положение, что и HigherImg , даже когда масштабирование имеет место).

Я новичок в CSS, так что все, что я мог сделать, это складывать изображения так:

.imgbox {
  text-align: center;
  position: relative;
}

.lowerImg {
  max-width: 100%;
  max-height: 85vh;
  z-index: 3;
}

.higherImg {
  max-width: 100%;
  max-height: 60vh;
  padding-right: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}

.topDiv {
  background: $pink-color;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  top: 0;
  left: 0;
  position: absolute;
  padding-right: 5px;
  transition: opacity .5s;
  z-index: 10;
  cursor: crosshair;
}

<div>
  <div class="imgbox">
    <img class="lowerImg" />
    <img class="higherImg" />
    <div class="topDiv"></div>
  </div>
</div>

Answer 1

Если я правильно понял, вы хотите, чтобы div и img накладывались друг на друга:

как-то так?

.imgbox {
  text-align: center;
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: red;
  cursor: default;
}

.topDiv {
  height: 50%;
  width: 50%;
  opacity: 0.8;
  position: absolute;
  border: 2px solid red;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lowerImg {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  border: 1px solid black;
  max-height: 100%;
  max-width: 100%;
  cursor: default;
}

.higherImg {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  max-width: 90%;
  max-height: 90%;
  border: 1px solid red;
  cursor: default;
  transition: opacity .8s;
  cursor: crosshair;
}

<div>
  <div class="imgbox">
    <div class="topDiv">
      <img class="lowerImg" src="http://placekitten.com/301/301" />
      <img class="higherImg" src="http://placekitten.com/201/201" />
    </div>
  </div>
</div>