为什么 overflow:hidden 不起作用？

Question

Overflow:hidden 对我不起作用。灰色框保留在图片下方。我不知道它有什么问题。我使用了 youtube 教程 中的这段代码。如果有人能帮助我，我将不胜感激。

.main 
{
 border: 10px solid white;
 width:378;
 height:250;
 margin:50px auto;
 box-shadow:0px 0px 25px black;
 overflow:hidden;
 }

.main:hover img 
{
-webkit-transform:scale(2,2) rotate(45deg);
}

.main:hover .content 
{
-webkit-transform:translate(-383px);
}

img 
{
-webkit-transition: -webkit-transform: 300ms; 
}

.content 
{ 
 width:378;
  height:250;
 background: rgba(118,115,115,0.5);
    -webkit-transition: -webkit-transform: 300ms;
}
   
   button 
   {
    width:100%;
    height:50px;
    margin-top:200px;
    background:black;
    border:0;
    cursor:pointer;
    color:white;
    font:16px tahoma;
   }
   
   button:hover {
   opacity: 0.5;
   }

<div class="main"><img src="img/switch.jpg" height="250" width="378"><div class="content"><button>Pepe Kalvier Switches</button></div></div>

Answer 1

您必须在 px 或 % 中添加值，在您的代码中您没有声明度量单位，即您是否要添加 px 或 % 或 em。

Demo

像这样：

.main {
   width:378px;
    height:250px;

}

Answer 2

在 .main div

中添加 height 和 width 以及 px

.main 
{
 border: 10px solid white;
 width:378px;
 height:250px;
 margin:50px auto;
 box-shadow:0px 0px 25px black;
 overflow:hidden;
  
 }

.main:hover img 
{
-webkit-transform:scale(2,2) rotate(45deg);
}

.main:hover .content 
{
-webkit-transform:translate(-383px);
}

img 
{
-webkit-transition: -webkit-transform: 300ms; 
}

.content 
{ 
 width:378;
  height:250;
 background: rgba(118,115,115,0.5);
    -webkit-transition: -webkit-transform: 300ms;
}
   
   button 
   {
    width:100%;
    height:50px;
    margin-top:200px;
    background:black;
    border:0;
    cursor:pointer;
    color:white;
    font:16px tahoma;
   }
   
   button:hover {
   opacity: 0.5;
   }

<div class="main"><img src="img/switch.jpg" height="250" width="378"><div class="content"><button>Pepe Kalvier Switches</button></div></div>

Answer 3

width:378;
height:250;

加像素，请

Answer 4

像这样纠正你的css...

你的CSS

.main {
  border: 10px solid white;
  width:378;/* Your mistake is here */
  height:250;/* Your mistake is here */
  margin:50px auto;
  box-shadow:0px 0px 25px black;
  overflow:hidden;
}

已更新CSS

.main {
     border: 10px solid white;
     width:378px;
     height:250px;
     margin:50px auto;
     box-shadow:0px 0px 25px black;
     overflow:hidden;
}

为什么 overflow:hidden 不起作用？

Why overflow:hidden is not working?

css

overflow