JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Overlapping Divs</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="img1">
        </div>
        <div class="img2">
        </div>
    </div>
</body>
</html>

CSS

.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;
  /*Remove opacity*/
  /*opacity: 0.3;*/
  --desired-opacity: 0.3;
  --contrast: calc(var(--desired-opacity) / (2 - var(--desired-opacity)));
  --brightness: calc(2 - var(--desired-opacity));
  filter: contrast(var(--contrast)) brightness(var(--brightness));
}

.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;
}