Why overflow:hidden is not working? - css

Question

Overflow:hidden is not working for me. Gray box remains under the picture. I don't know whats wrong with it. I used this code from youtube tutorial.
If some one can help me, I will be very thankful.
.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

You have to add values in px or in %, In your code you didn't declare a unit of measure i.e, whether you want to add px or % or em.
Demo
like this:
.main {
width:378px;
height:250px;
}

Answer 2

Add height and width with px in .main div
.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;
add px, pls

Answer 4

Just correct your css like this...
Your 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;
}
Updated CSS
.main {
border: 10px solid white;
width:378px;
height:250px;
margin:50px auto;
box-shadow:0px 0px 25px black;
overflow:hidden;
}