Currently, I am in the process of creating my portfolio website and after experimenting with some code, I was able to achieve the desired outcome.
<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>
This functionality was enabled by using the following JavaScript:
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";
}
You can see how it works by visiting the following link: http://codepen.io/anon/pen/mkpha
However, when attempting to implement a responsive grid layout, I encountered a challenge in integrating the image blur effect and text overlay feature into the existing code.
<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>