带有CSS的文本溢出图像效果？

.container {
  position: relative;
  width: 100%;
  min-height: 600px;
  border: 1px solid black;
  display: flex;
  justify-content: right;
}

.container img {
  width: 50%;
  height: auto;
  object-fit: cover;
}

.container h4 {
  font-size: 3rem;
  max-width: 60%;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}

<div class="container">
  <img src="https://images.pexels.com/photos/2857477/pexels-photo-2857477.jpeg?cs=srgb&dl=pexels-deepu-b-iyer-2857477.jpg&fm=jpg" />
  <div class="overlay">
    <h4>Apparently, we had reached a great height in the athmosphere
    </h4>
  </div>
</div>