Adding an overlay background to image not responding properly

Question

Currently I'm trying to have an overlay over my image to make it darker and have text over it. I have used absolute positioning for my image and overlay, but for some reason the overlay takes up the whole space of my window and resides above my text. I want it to look like this:

CodeSandbox: https://codesandbox.io/s/amazing-mendeleev-gohz7?file=/src/App.tsx

Code:

<div className="container" style={{ padding: "30px" }}>
        <img style={{ borderRadius: "10px" }} src="dubai.png"></img>
        <div
          style={{
            background: "rgba(0, 0, 0, 0.5)",
            width: "100%",
            height: "100%",
            zIndex: 1,
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)"
          }}
        ></div>
        <div
          style={{
            color: "#fff",
            position: "absolute",
            top: "20%",
            left: "50%",
            transform: "translate(-50%, -100%)",
            fontFamily: "Roboto",
            width: "100%"
          }}
        >
          <div style={{ fontSize: "35px", textAlign: "center", zIndex: 200 }}>
            DUBAI UAE
          </div>
        </div>
      </div>

Answer 1

You need to position your overlay relative to it's parent.

Then, your parent has padding:10px set. That means that the image will be smaller ( won't cover the whole div ) by 20px width and 20px height. But the overlay will cover the whole div. From there you see ' the border around the image ' as you state in your comments. Which in fact it's just empty space made by the 10px padding on parent div .

So, you have to make your overlay smaller to not exceede the image . For that you should use calc(100% - 20px) for both width and height of the overlay.

The positioning and zIndex of the text have to be changed as well. Take a look here https://codesandbox.io/s/interesting-tree-p4vwp?file=/src/App.tsx

Code below

import "./styles.css";
import Head from "next/head";

export default function App() {
  return (
    <>
      <div
        className="container"
        style={{ padding: "10px", position: "relative" }}
      >
        <img
          style={{ borderRadius: "10px", width: "100%", height: "auto" }}
          src="dubai.png"
        />
        <div
          style={{
            background: "rgba(0, 0, 0, 0.5)",
            width: "calc(100% - 20px)",
            height: "calc(100% - 20px)",
            zIndex: 1,
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            borderRadius: "10px"
          }}
        ></div>
        <div
          style={{
            color: "#fff",
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            fontFamily: "Roboto",
            width: "100%",
            zIndex: 2
          }}
        >
          <div style={{ fontSize: "35px", textAlign: "center", zIndex: 200     }}>
            DUBAI UAE
          </div>
        </div>
      </div>
    </>
  );
}