div 크기

html은

<div class = "entire-box">
    <div class = "box" style = "position : relative">
        <div class = "box2">
            <div class = "box3">
                <p style = "color : whitesmoke">아 이 망할 box2 사진 크기랑 어떻게 똑같이 만드냐</p>
            </div>
        </div>
        
    </div>
    <div class = "box"></div>
    <div class = "box"></div>
</div>

이렇게 제작했고
css는

.entire-box {
    background-color: #eee;

    margin : auto;
    display : flex;
}

.box {
    width : 33%;
    padding : 30px;
}

.box img {
    width : 100%;
}

.box2 {
    width : 100%;
    height : 100%;
    position : absolute;
    overflow : hidden;
}

.box3 {
    width : 100%;
    height : 100%;
    background-color: grey;
    margin-top : 100%;
    opacity : 0;
    transition: margin-top 2s;
}

.box2:hover .box3 {
    margin-top : 50%;
    opacity: 0.5;
}

이렇게 만들었습니다.
transition기능은 생각한대로 작동은 하는 것 같은데
img랑 transition올라오는 div크기가 다릅니다.
어디서 틀린건가요..??