要能够在特定元素上放置“覆盖”：

• 你需要你覆盖的元素（你的#container-img）是position: relative。
• overlay 本身必须相对于position: absolute元素定位。
• 根据您的需要，通过给top、right、bottom和/或left赋值，或者像我在代码片段中使用的那样，定义它们的简写inset属性，将 overlay 定位在元素内部。当您想要 overlay 图像时，inset: 0会将 overlay 拉伸到其父#container-img的所有边。
• 剩下要做的就是定义悬停#container-img时的CSS。

我在代码片段中注解了我的更改和添加：

#container {
  display: flex;
  gap: 50px;
}

#container-text {
  flex: 3;
}

#container-img {
  flex: 2;
  background-color: yellow;
  align-self: flex-start;
}

/*************************/
/* Changes and additions */
/*************************/
/* Changed */
#container-img img {
  display: block; /* removes small whiete space below image */
  /* disable this property to see the difference! */

  width: 100%;
  opacity: 20%;
}

#container-img .overlay {
    content: "";
    position: absolute;
    inset: 0; /* shorthand for T/R/B/L properties */
    background: rgb(0,255,0,.2); /* a semi transparent color */
}

/* ADDED */
#container-img {
  position: relative; /* new stacking context to position overlay */
}
#container-img:hover .overlay {
  display: none; /* hide the overlay on hover */
}

<div id="container">

  <div id="container-text">
    <p>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
  </div>

  <div id="container-img">
    <img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3" alt="profile picture">
    <div class="overlay"></div>
  </div>

</div>