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

我不知道为什么会想要使用javascript，如果你只是想要一个文本覆盖，将鼠标悬停在一个特定的div上。我仍然不确定这是否是你想要实现的目标，但我对你在问题中理解的内容进行了简单的模拟：

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

让我知道这不是你想要实现的目标

如何悬停在图像上然后图像模糊和叠加文本出现

1 个答案: