[英]how to do hover over image then image blurred and overlay text appears
我正在制作投资组合网站,并且尝试了此代码,它确实有效
<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>
我不知道为什么将鼠标悬停在特定的div上,如果只想覆盖文本,为什么要使用javascript。 我仍然不确定这是否是您想要实现的目标,但是我对您从问题中了解的内容进行了简单的模拟:
http://codepen.io/nighrage/pen/DqKLj
让我知道这是否不是您要实现的目标
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.