first div expanding beyond specified size?

first div expanding beyond specified size?

have four items that just show a bg image until you hove and then it
displays text, bg image is then set to none.
The first element is expanding beyond the height of the other three. I
really just wanted them all to stay at 200x200px. All the images used for
backgrounds are 200x200px.
Should the .p1top be positioned differently such as absolute?
.p1top {
height:200px;
margin-left:45px;
background-repeat: no-repeat;
background-image: url(protect.png);
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.p1top :hover {
height:200px !important;
width:200px;
background-image:none;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
.p2top :hover {
width:200px;
background-image:none;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
.p2top {
background-repeat: no-repeat;
background-image: url(build.png);
float:left;
margin-left:-15px;
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
/*.p2top :hover {width:200px; background-color:#7D8093;line-height: 20px;
color: #FFFFFF; }*/
.p3top {
background-repeat: no-repeat;
background-image: url(savebg.png);
margin-left: -20px;
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.p3top :hover {
width:200px;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
.p4top {
background-repeat: no-repeat;
background-image: url(help.png);
margin-left: -20px;
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.p4top :hover {
width:200px;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}