Smithy Smithy - 13 days ago 7
CSS Question

How can I make this overlay cover the whole thumbnail

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

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