how to put a black overlay on a photo css

1.header {
2  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
3}

1<style>
2#wrapper{
3  position:relative;
4  width:fit-content;
5  height:fit-content;
6}
7
8#overlay{
9  position:absolute;
10  top:0;
11  width:100%;
12  height:100%;
13  z-index:1;
14  background-color:black;
15  opacity:.5;
16}
17</style>
18
19<div id='wrapper'>
20  <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=1.00xw:0.669xh;0,0.190xh&resize=640:*" alt="">
21  <div id='overlay'></div>
22</div>