How do I make a flexible block that will make have the same width and height as a flexible photo and will be on top of the photo?

.img_random{
  	margin-left: 50%;
	  transform: translate(-50%);
	  position: absolute;
	  max-width: 1057px;
	  width: 95%;
}

.img_random img{
	width: 100%;
}

.block-that-should-be-like-a-photo{
  position: absolute;
  max-width: 1057px;
  height: 621px;
  width: 95%;
  background-color: red;
  opacity: 0.5;
  margin-left: 50%;
  transform: translate(-50%);
}

<div class="img_random"><img src="https://sun9-14.userapi.com/c857536/v857536576/10ef5e/WDQSe10CrOs.jpg" alt="A random photo"></div><div class="block-that-should-be-like-a-photo"></div>