HTML/CSS 포트폴리오 숙제관련 질문입니다.

HTML/CSS 포트폴리오 숙제관련 질문입니다.

<div class="portfolio">
        <div class="portfolio-container">
            <div class="portfolio-item1">
                <div class="white-box"></div>
                <div class="portfolio-text">
                    <h4>Stationary</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
            <div class="portfolio-item2">
                <div class="portfolio-text">
                    <h4>Stationary</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
            <div class="portfolio-item3">
                <div class="portfolio-text">

                    <h4>Stationary</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
            <div class="portfolio-item4">
                <div class="portfolio-text">

                    <h4>Stationary</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
        </div>
    </div>

.portfolio-text {
    color: white;
    padding: 50px;
    width: 100%;
}

.white-box {
    display: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    border: 0px solid white;
    transition: all 1s;
    background-color:#5a36be; //확인을 위해 보라색으로
}

.white-box:hover {
    border: 30px solid white
}

z-index를 줘도 글자가 안보이는 현상이 일어납니다.. 글자에 index를 크게 줘도 계속 안보입니다..

• 이 게시글은 김영준에 의해 9 월, 2 주 전에 수정됐습니다.