Question

我有一排图像，每个图像的顶部都有一个描述。顶层应该完美地适合图像，但是它填充了块的整个尺寸，包括它应该在里面的填充。

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

我尝试添加其他具有各种设置的div作为面具等，但没有任何效果。

代码在下面..我已经简化了一点，以显示出现了什么问题而没有其余的臃肿。

    <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

Bootstrap悬停层覆盖图像

1 个答案: