How can I make this overlay cover the whole thumbnail - css

Question

So I would like to cover the whole thumbnail when hovering over, so that the overlay content fills the whole image, 100% by 100%. So the overlay should cover only image(whole size of it), not more than that.
Here's the pen to demonstrate the current state: http://codepen.io/anon/pen/JbJgoe
.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;
overflow: hidden;
}
.about .about__inner .about__inner--overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
transition: opacity .25s ease;
}
.about .about__inner:hover .about__inner--overlay {
opacity: 1;
}
<div class="container about">
<div class="about__images">
<div class="row">
<div class="about__inner col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="" class="hideonhover">
<div class="about__inner--overlay">
<i class="fa fa-user" aria-hidden="true"></i>
<p>lorem</p>
</div>
</div>
<div class="about__inner col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="">
<div class="about__inner--overlay">
<i class="fa fa-user" aria-hidden="true"></i>
<p>lorem</p>
</div>
</div>
<div class="about__inner col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="">
<div class="about__inner--overlay">
<i class="fa fa-user" aria-hidden="true"></i>
<p>lorem</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

You are close to it. Just a small modification in structure and a few lines in css:
HTML:
<div class="col-md-4">
<div class="about__inner">
<img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="" class="hideonhover">
<div class="about__inner--overlay">
<i class="fa fa-user" aria-hidden="true"></i>
<p>lorem</p>
</div>
</div>
CSS:
.about .about__inner .about__inner--overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
transition: opacity .25s ease;
position: absolute;
top:0;
width:100%;
height:100%;
}
.about__inner{
position:relative;
}
.about__inner--overlay{
color:#fff;
}
Codepen: http://codepen.io/swapnaranjitanayak/pen/oYwKLO

Answer 2

You need to use absolute positionning and size the box. You may use coordonates to size the box so it fits any size since you already set the parent in relative positionning..
.about .about__inner .about__inner--overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
transition: opacity .25s ease;
top:0;
left:15px;
right:15px;
bottom:0;
color:white;
position:absolute
}
.about__images {
max-width: 800px;
margin: 0 auto;
}
.about__inner {
margin-top: 60px;
}
.about__inner img {
max-width: 100%;
padding-right: 20px;
}
.about .about__inner {
position: relative;
overflow: hidden;
}
.about .about__inner .about__inner--overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
transition: opacity .25s ease;
top:0;
left:15px;
right:35px;
bottom:0;
color:white;
position:absolute
}
.about .about__inner:hover .about__inner--overlay {
opacity: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container about">
<div class="about__images">
<div class="row">
<div class="about__inner col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="" class="hideonhover">
<div class="about__inner--overlay">
<i class="fa fa-user" aria-hidden="true"></i>
<p>lorem</p>
</div>
</div>
<div class="about__inner col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="">
<div class="about__inner--overlay">
<i class="fa fa-user" aria-hidden="true"></i>
<p>lorem</p>
</div>
</div>
<div class="about__inner col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="">
<div class="about__inner--overlay">
<i class="fa fa-user" aria-hidden="true"></i>
<p>lorem</p>
</div>
</div>
</div>
</div>
</div>

Answer 3

Try this:
.about__inner {
padding: 0px; //for full frame image
}
.about__inner img {
max-width: 100%;
max-height: 100%;
object-fit: cover; //force image display as cover, no scale
}
.about .about__inner .about__inner--overlay {
position: absolute; //You need it to arrange the div.
top: 0px;
left:0px;
width: 100%;
height: 100%;
}

Answer 4

Try this:
.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;
overflow: hidden;
}
.about .about__inner .about__inner--overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
transition: opacity .25s ease;
}
.about .about__inner:hover .about__inner--overlay {
opacity: 1;
position: relative;
height: 185px;
top: -185px;
}