css - 我怎样才能让这个覆盖覆盖整个缩略图

Question

所以我想在悬停时覆盖整个缩略图，以便覆盖内容填充整个图像，100% x 100%。所以叠加层应该只覆盖图像(它的整个大小)，而不是超过那个。

这是演示当前状态的笔: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

你离它很近了。只是结构上的一个小修改和 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;
}

代码笔:http://codepen.io/swapnaranjitanayak/pen/oYwKLO