I'm attempting to place a div or span on top of an image that is positioned above another image. Both images are centered and resized to fit. The height of my images is greater than the width, but they are not set at a fixed size. I want the div to perfectly match the dimensions and placement of the higherImg even when scaling occurs.
As a CSS novice, all I have been able to accomplish so far is stacking the images like this:
.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>