为什么我的溢出：隐藏不能使用 div+img？

Question

我想制作一个带有悬停内容的照片库，但是选择的照片有不同的形状和大小，所以我设置了一个固定大小的区域（带%），我想用over-flow: hidden隐藏图像的溢出部分。但它仍然无法正常工作。我搜索了，最明显的答案是在父子元素中设置位置。但是，就我而言，我已经设置了，但仍然无法正常工作。有谁知道这是为什么？

HTML

  <div class="container">
    <img src="1st_pic.png">
      <div class="txt">
        <p>test test</p>
       </div>
   </div>

CSS

.container{
  position: relative;
  width: 20%;
  height: 30%;
  over-flow:hidden;
  background-color: yellow;

}
.container img{
  position: absolute;
  width: 100%;
}

.container .txt{
  position: absolute;
  top: 0%;
  height: 100%;
  width: 100%;
  color: #fff;
  background-color: rgba(0, 0, 0, .4);
}

Answer 1

尝试“溢出”而不是“溢出”。 Overflow

Answer 2

你拼写错误溢出。

试试

溢出：隐藏；