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

I want to make the photo gallery with hover content on it, but the selected photos come in different shapes and sizes, so I set a fixed-size area (with %), and I want to use over-flow: hidden to hide the overflowing part of the image. But it is still not working. I searched, and the most obvious answer it's to set the position in parent and children element. However, in my case, I had set, but still not working. Anyone knows why is that?

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);
}

Try "overflow" not "over-flow". Overflow