html - 图像叠加文本不响应 Bootstrap

Question

我很清楚这是一个反复出现的问题。我已经检查了我的代码，但据我所知它应该可以工作。它应该在不使用媒体查询或 vw 的情况下工作。(我认为)

意图:有一个图像，当我将鼠标悬停在它上面时，会出现一个文本。
问题:出现了文本，但没有响应。

请让我知道我应该做些什么不同的事情。

感谢您的宝贵时间。

HTML:

<section id="recent-news"> 
<div class="container">
        <div class="center wow fadeInDown">
            <h2>Recent News</h2>
            <h3 class="lead">The latest news about the school, research, students and more.</h3>
        </div>
        <div class="row">
            <div class="col-xs-4 col-sm-4 col-md-3">
                <div class="recent-news-wrap">
                    <img class="img-responsive" src="images/portfolio/recent/item1.png" alt="">
                    <div class="overlay">
                        <div class="recent-news-inner">
                            <h3 class = "text-center"><a href="#">Mobile Development</a> </h3>
                            <p>We lead the field. Read more about the latest updates in this field.</p>
                            <a class="preview" href="images/portfolio/full/item1.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                        </div> 
                    </div>
                </div>
            </div>  

CSS:

#recent-news .col-xs-4.col-sm-4.col-md-3{
  padding: 8px;
}

#recent-news{
    padding-bottom: 70px;
}

.recent-news-wrap {
  position: relative;
}

.recent-news-wrap img{
  width: 100%;
}

.recent-news-wrap .recent-news-inner{
  top: 0;
  background: transparent;
  opacity: .8;
  width: 100%;
  border-radius: 0;
  margin-bottom: 0;
}

.recent-news-wrap .recent-news-inner h3{
  margin: 10px 0;
}

.recent-news-wrap .recent-news-inner h3 a{
  font-size: 24px;
  color: #fff;
}

.recent-news-wrap .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 0;
  background: #3579DC;
  color: #fff;
  vertical-align: middle;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;  
  padding: 30px;
  text-align: center;
}

.recent-news-wrap .overlay .preview {
  bottom: 0;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  border-radius: 0;
  background: transparent;
  text-align: center;
  color: #fff;
}

.recent-news-wrap:hover .overlay {
  opacity: 1;
}

Answer 1

通过响应式，我猜您希望叠加层适合页面。

在 .recent-news-wrap .overlay {} 中使用 width: calc()，如下所示:

.recent-news-wrap .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 60px);
  height: 100%;
  opacity: 0;
  border-radius: 0;
  background: #3579DC;
  color: #fff;
  vertical-align: middle;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;  
  padding: 30px;
  text-align: center;
}

参见 fiddle :https://jsfiddle.net/DIRTY_SMITH/2xzj4dqo/1/