css overlay: create an overlay with opacity without affecting content inside the overlay

<div class="wrapper"> <div class="overlay overlay-black"> <h2>Hi Jisoo</h2> </div> <img src="https://image.thanhnien.vn/w2048/Uploaded/2021/wsxrxqeiod/2021_12_24/blackpink-1-6772.jpg" alt="testpic"> </div> 

.overlay { width: 100%; height: 100%; position: fixed; width: 100vw; height: 100vh; display: flex; text-align: center; justify-content: center; align-items: center; cursor: pointer; display: none; } .overlay-black { // css for content inside overlay background: rgba(0,0,0,0.1); color: white !important; } .wrapper:hover .overlay-black { display: flex; }