Trying to get the black to be able to see through to the image

HTML & CSS
1

I want the black to be set as transparent while also being able to see through the red to the image.

I only want to see the picture, image come through the black portion only.

When the black is set to transparent, the picture should become visible.

I want to be able to set the black to transparent and have the picture, image be visible through only the transparent space.

How would I accomplish that?

code: https://jsfiddle.net/gfc3jrbL/

.image {
  position: relative;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  background-image: url("https://via.placeholder.com/300");
  background-repeat: no-repeat;
  background-size: cover;
}

.layer {
  width: 300px;
  height: 300px;
  background: red;
}

.layer2 {
  width: 150px;
  height: 150px;
  background: black;
  position: absolute;
  top: 30px;
  left: 15px;
  bottom: 0;
  right: 0;
}

<div class="image">
  <div class="layer"></div>
  <div class="layer2"></div>
</div>