부모보다 자식이 더 커요

port-1 밑에 overlay라는 투명창을 만들어서 margin을 주려고 하는데요 

.port-1 {
float: left;
width: 50%;
height: 400px;
background-image: url(../img/portfolio-1.jpg);
background-size: cover;
}

.overlay {
position: absolute;
width: 100%;
height: 100%;
border : 0px solid white;
}

.overlay:hover {
border : 30px solid white;
}

으로 짜봤는데
width: 100% height: 100%
면  자식인 overlay가 부모인 port-1을 빼닮아야 하지 않나요 
왜 부모보다 본인이 더 큰걸까요

유교보이인 저로서는 이런 패륜적인 행위를 참을 수가 없습니다