投资组合悬停叠加层未停留在图片大小

Question

对于我的投资组合网站，我正在制作，所以当您将鼠标悬停在投资组合图像上时，它会覆盖标题和类别。我的问题是叠加部分正在拾取网格中图像间距的边距和填充。我无法将其视为投资组合图像大小，而无需移除图像之间的阴沟。

以下示例：

不确定如何解决此问题，我们将不胜感激。

.thumbnail {
  padding: 0px !important;
  margin-bottom: 25px;
  border: none;
  border-radius: 0;
  display: block;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  margin-bottom: 0px;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  padding: 0px 0px 0px 0px;
  transition: .5s ease;
  background-color: rgba(136, 24, 38, 0.6);
}

.thumbnail:hover .overlay {
  opacity: 1;
  height: 100%;
  width: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  width: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<section id="work" class="bg-grey">
  <div class="container-fluid text-center">
    <h2>MY WORK</h2>
    <!--<h4>What we have created</h4>-->
    <div class="row text-center">

      <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="http://www.google.com/">
          <div class="thumbnail">
            <img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME">
            <div class="overlay">
              <div class="text">
                <h4>PORTFOLIO NAME</h4>
                <p>category</p>
              </div>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="http://www.google.com/">
          <div class="thumbnail">
            <img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME">
            <div class="overlay">
              <div class="text">
                <h4>PORTFOLIO NAME</h4>
                <p>category</p>
              </div>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="http://www.google.com/">
          <div class="thumbnail">
            <img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME">
            <div class="overlay">
              <div class="text">
                <h4>PORTFOLIO NAME</h4>
                <p>category</p>
              </div>
            </div>
          </div>
        </a>
      </div>

    </div>
  </div>
</section>

Answer 1

使用absolute定位元素时，请始终设置相应的relative位置元素。如果您对输出有任何问题，请告诉我。

唯一的CSS更改是针对以下类。我在哪里添加了属性position: relative。

.thumbnail {
  padding: 0px !important;
  position: relative;
  margin-bottom: 25px;
  border: none;
  border-radius: 0;
  display: block;
}

因此，您对班级overlay的绝对定位div将针对具有班级thumbnail的div进行定位

＆＃13;

＆＃13;

.thumbnail {
  padding: 0px !important;
  position: relative;
  margin-bottom: 25px;
  border: none;
  border-radius: 0;
  display: block;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  margin-bottom: 0px;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  padding: 0px 0px 0px 0px;
  transition: .5s ease;
  background-color: rgba(136, 24, 38, 0.6);
}

.thumbnail:hover .overlay {
  opacity: 1;
  height: 100%;
  width: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  width: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="work" class="bg-grey">
  <div class="container-fluid text-center">
    <h2>MY WORK</h2>
    <!--<h4>What we have created</h4>-->
    <div class="row text-center">

      <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="http://www.google.com/">
          <div class="thumbnail">
            <img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME">
            <div class="overlay">
              <div class="text">
                <h4>PORTFOLIO NAME</h4>
                <p>category</p>
              </div>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="http://www.google.com/">
          <div class="thumbnail">
            <img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME">
            <div class="overlay">
              <div class="text">
                <h4>PORTFOLIO NAME</h4>
                <p>category</p>
              </div>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="http://www.google.com/">
          <div class="thumbnail">
            <img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME">
            <div class="overlay">
              <div class="text">
                <h4>PORTFOLIO NAME</h4>
                <p>category</p>
              </div>
            </div>
          </div>
        </a>
      </div>

    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;