Não consigo descobrir por que o elemento de índice z mais alto é transparente onde está sobreposto. Alguma idéia do que estou fazendo de errado aqui?
.container {
position: relative;
width: 700px;
height: 500px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}
.img1 {
background: url('https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg');
background-size: cover;
width: 300px;
height: 200px;
top: 50px;
position: absolute;
z-index: 3;
opacity: 0.3;
}
.img2 {
background: url('https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg');
background-size: cover;
width: 300px;
height: 200px;
top: 150px: left: 200px;
position: absolute;
z-index: 1;
opacity: 0.3;
}
<div class="container">
<div class="img1">
</div>
<div class="img2">
</div>
</div>