如何将鼠标悬停在图像上，然后图像模糊并且出现覆盖文字

Question

I am making portfolio website and I tried this code and it worked

<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>

with this 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";
}

}

it works like this : http://codepen.io/anon/pen/mkpha

however, i tried to use responsive grid but then i am not sure how to incorporate the function of image blurred and text overlay appears with this code here.

<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

I don't know why would want to use javascript if you simply want to have a text overlay, on hovering over a specific div. I am still not certain if this is what you want to achieve, but I did a simple mock-up on what I understood from your question:

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

let me know if this not what you were trying to achieve