html - 在图像上 Bootstrap 悬停层

Question

我有一排图片，每张图片上面都有一层，上面有描述。顶层应该完全适合图像，但是它填充了 block 的整个大小，包括它应该在其中的填充。

该站点正在使用 Bootstrap 。图片需要响应，我认为这是导致问题的原因。

我已经尝试添加具有各种设置的额外 div 来充当 mask 等，但没有任何效果。

代码如下。我对其进行了一些简化，以显示出了什么问题，而没有其余的臃肿。

    <div class="container">
    <div class="row">
        <div class="col-xs-12 projects-box">
            <div class="row">
                <div class="col-xs-12 text-center"><h2>Main Title</h2></div>
            </div>
            <div class="row">
                <div class="col-xs-4 home-projects">
            <a class="home-project-content" href="#">
              <img class="home-project-image" alt="Project 1" src="http://placehold.it/365x365">
              <div class="home-project-info">
                <strong>Project Title 1</strong><br>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
            </a>
        </div>
        <div class="col-xs-4 home-projects">
            <a class="home-project-content" href="#">
              <img class="home-project-image" alt="Project 2" src="http://placehold.it/365x365">
              <div class="home-project-info">
               <strong>Project Title 2</strong><br>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
            </a>
        </div>
        <div class="col-xs-4 home-projects">
            <a class="home-project-content" href="#">
              <img class="home-project-image" alt="Project 3" src="http://placehold.it/365x365">
              <div class="home-project-info">
                <strong>Project Title 3</strong><br>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
            </a>
        </div>
            </div>
        </div>
    </div>
</div>

和CSS

img {
  max-width: 100%;
  height: auto;
}

.projects-box {
  padding-top: 10px;
  padding-bottom: 30px;
}
.projects-box h2 {
  margin-left: auto;
  margin-right: auto;
}
.projects-box .home-projects {
  padding-top: 15px;
  padding-bottom: 15px;
}

.projects-box .home-project-content {
  display: block;
}
.projects-box .home-project-image {
  display: block;
}

.projects-box .home-project-info {
  background-color: rgba(0,0,0,0.7); 
  color: rgba(255,255,255,1);
  position: absolute; 
  top: 0;
  left: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  display: inline-block;
}

http://www.bootply.com/qj8SwPzl75

Answer 1

将 position: relative; 添加到 .projects-box .home-project-content

http://www.bootply.com/9DHmuFvGvf