如何将鼠标悬停在图像上，然后图像模糊并显示覆盖文本

Question

我正在制作投资组合网站，我尝试了这个代码，它起到了的作用

<div id="nytimes" class="portfolio-thumbnail" style="left: 100px; top: 80px;">
  <span class="text">
      NY times magazine: Table of Contents
  </span>
<img src="images/nytimes.png" alt="">
</div>

用这个js

function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .8;
if(overlay.style.display == "block"){
    overlay.style.display = "none";
    specialBox.style.display = "none";
} else {
    overlay.style.display = "block";
    specialBox.style.display = "block";
}

}

它是这样工作的：http://codepen.io/anon/pen/mkpha

然而，我尝试使用响应网格，但我不确定如何将图像模糊和文本覆盖的功能与此代码结合在一起。

<div class="row">
 <div class="col-xs-4"><img src="images/nytimes.png" class="img-responsive"></div>
 <div class="col-xs-4"><img src="http://placehold.it/450x600" class="img-responsive">     </div>
 <div class="col-xs-4"><img src="http://placehold.it/450x600" class="img-responsive"> </div>
</div>

Answer 1

如果你只是想在特定的div上悬停一个文本覆盖层，我不知道为什么要使用javascript。我仍然不确定这是否是你想要实现的，但我对你的问题做了一个简单的模拟：

http://codepen.io/nighrage/pen/DqKLj

如果这不是您想要实现的，请告诉我