호버, CSS 애니메이션 전에 이미지 오버레이 숨기기

Question

오버레이 콘텐츠를 마우스로 가리키면 이미지의 맨 아래부터 올리 겠지만 어떤 이유로 항상 위치가 표시됩니다. 여기에 펜입니다 : http://codepen.io/anon/pen/PbjVgy

* { 
    background-color: grey; 
    color: white; 
} 

.about__images { 
    max-width: 800px; 
    margin: 0 auto; 
} 

.about__inner { 
    margin-top: 60px; 
} 

.about__inner img { 
    max-width: 100%; 
    margin-right: 20px; 
} 


/**/ 

.about .about__inner { 
    position: relative; 
} 

.about .about__inner .about__inner--overlay { 
    position: absolute; 
    top: 100%; 
    left: 15px; 
    text-align: center; 
    background: rgba(0, 0, 0, 0.8); 
    width: 89%; 
    height: 100%; 
    transition: all 0.1s ease-in; 
} 

p { 
    margin-top: 60px; 
} 

.about .about__inner:hover .about__inner--overlay { 
    top: 0; 
} 

<section class="about"> 
    <h5 class="small__title">Lorem ipsum</h5> 
    <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae commodi nisi aut animi, excepturi impedit dicta natus culpa. Veniam atque sapiente assumenda fugiat tempore ipsam eos quae</p> 
    <div class="container"> 
    <div class="about__images"> 
     <div class="row"> 
     <div class="about__inner col-md-4"> 
      <img src="https://placeholdit.imgix.net/~text?txtsize=37&txt=390%C3%97259&w=390&h=259" alt=""> 
      <div class="about__inner--overlay"> 
      <p>overlay content</p> 
      </div> 
     </div> 
     <div class="about__inner col-md-4"> 
      <img src="https://placeholdit.imgix.net/~text?txtsize=37&txt=390%C3%97259&w=390&h=259" alt=""> 
      <div class="about__inner--overlay"> 
      <i class="fa fa-user" aria-hidden="true"></i> 
      <p>overlay content</p> 
      </div> 
     </div> 
     <div class="about__inner col-md-4"> 
      <img src="https://placeholdit.imgix.net/~text?txtsize=37&txt=390%C3%97259&w=390&h=259" alt=""> 
      <div class="about__inner--overlay"> 
      <i class="fa fa-user" aria-hidden="true"></i> 
      <p>overlay content</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

Answer 1

추가 overflow: hidden-.about__inner

.about__inner { 
    margin-top: 60px; 
    overflow: hidden; 
} 

http://codepen.io/anon/pen/ENXMxW