1
尝试在引导平台上使用CSS在图像上创建类似的效果。有一些难以执行的时间。我想要做的就是在图片悬停上应用一个透明的过度播放盒子和一个居中的glyp-eye图标,并且它假设是响应式的。下面是我的代码和效果截图:引导图像悬停覆盖图标
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
.pdf-thumb-box
{
display: inline-block !important;
position: relative !important;
}
.pdf-thumb-title-active
{
color: #000;
}
.pdf-thumb-box-overlay
{
position: absolute;
background-color: rgba(15, 15, 15, 0.31);
width: 100%;
height: 100%;
}
.pdf-thumb-box-overlay i
{
bottom: 50%;
top: 50%;
position: absolute;
font-size: 40px;
margin-left: -10px;
margin-top: -10px;
}
<div class="container">
<div class="col-md-4">
<div class="pdf-thumb-box">
<a href="#2013-Katalog">
<div class="pdf-thumb-box-overlay">
<div class="center-box"></div><i class="glyphicon glyphicon-eye-open"></i>
</div>
<img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog">
</a>
</div>
</div>
</div>
感谢这里的答复是的jsfiddle网址:http://jsfiddle.net/Tankucukhas/dhs4bfgj/ – 2014-11-08 23:55:15
你想只显示在眼前徘徊? – vcrzy 2014-11-09 00:06:09
假设是常规图像,并且一旦将鼠标悬停在图像上,就需要出现覆盖层和图标。 – 2014-11-09 00:09:47