landing page animation 질문

안녕하세요. landing page  transition 관련 질문 있읍니다, 
마우스 올리면 white box가 나오게 했는데.. 글자가 안보이네요..

무엇을 수정해야 하는지 잘 못찾겠네요.. 
한번 봐주실수 잇는지요? 감사합니다,

-- html

        <div class="portfolio">
          <h4>What we can DO</h4>
          <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>

-- css

.portfolio-item1 {
  float: left;
  width: 50%;
  height: 350px;
  background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(../img/portfolio-1.jpg);
  background-size: cover;
}

.white-box {
  width: 100%;
  height: 100%;
  z-index : 2;
  border : 0px solid white;
  transition: all 1s;
  position: relative;
  opacity : 0;
}

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