为什么我的 overflow:hidden 不能与 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

您的 overflow 拼写错误。

尝试

溢出：隐藏；

为什么我的 overflow:hidden 不能与 div+img 一起使用？

Why my over-flow:hidden not working with div+img?

css

image

overflow

hidden

photo-gallery