Hide image overlay before hover, css animation - css

Question

I would like the overlay content to come from bottom of the image when hovered, but for some reason it's always visible, am I missing something with positioning? Here's the pen: 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

Add overflow: hidden to .about__inner
.about__inner {
margin-top: 60px;
overflow: hidden;
}
http://codepen.io/anon/pen/ENXMxW