投资组合悬停覆盖不保持图像大小

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 变化是下面的 class。我在其中添加了属性 position: relative.

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

所以你的绝对定位 div 和 class overlay 将相对于 div 和 class thumbnail

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

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

投资组合悬停覆盖不保持图像大小

Portfolio hover overlay not staying in image size

html

css

portfolio

overlay

twitter-bootstrap