Question

所以我希望在悬停时覆盖整个缩略图，以便叠加内容填充整个图像，100％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

您需要使用absolute定位并调整框大小。您可以使用coordonates来调整框的大小，使其适合任何大小，因为您已经在relative位置设置了父级..

.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 2

你很接近它。只是对结构进行了一些小修改，在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 3

试试这个：

.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;
}

如何使此叠加层覆盖整个缩略图

4 个答案: