Html 图像覆盖文本不响应引导

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

其目的是：拥有一个图像，当我将鼠标悬停在上面时，会出现一个文本。 问题是：文本出现了，但没有响应

请让我知道我应该怎么做

谢谢你抽出时间

HTML:

---

通过响应，我猜您希望覆盖层适合页面

在.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:

请将其作为一个片段，看一看文本覆盖是以绝对位置放置的，因此需要媒体查询来保持它对各种屏幕的响应。类似这样的内容？嗨，亚当，是的。我想文本覆盖调整自己的大小作为页面的大小减少。你的解决方案没有解决那个问题。谢谢你的尝试。

#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;
}

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