Html 带有图标的引导图像悬停覆盖
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26823237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 03:02:08 来源:igfitidea点击:
bootstrap image hover overlay with icon
提问by Tan Kucukhas
Trying to create similar effect on the image with CSS on bootstrap platform. Having some hard time to implement. What I'm trying to do is on image hover apply an transparent overplay with a box and a centered glyp-eye icon and it suppose to be responsive. Below is my code and the screenshot of the effect:
尝试在 bootstrap 平台上使用 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>回答by Tan Kucukhas
Alternative solution I made with only using CSS. http://jsfiddle.net/Tankucukhas/ez470dxo/4/
我仅使用 CSS 制作的替代解决方案。 http://jsfiddle.net/Tankucukhas/ez470dxo/4/
.pdf-thumb-box {
display: inline-block !important;
position: relative !important;
overflow: hidden;
}
.pdf-thumb-box-overlay {
display: none;
}
.pdf-thumb-box a:hover .pdf-thumb-box-overlay {
display: inline;
text-align: center;
position: absolute;
transition: background 0.2s ease, padding 0.8s linear;
background-color: rgba(255, 0, 0, 0.58);
color: #fff;
width: 100%;
height: 100%;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.pdf-thumb-box-overlay span {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="col-md-4">
<div class="pdf-thumb-box">
<a href="#2013-Katalog">
<div class="pdf-thumb-box-overlay"><span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i>
<i class="fa fa-eye fa-stack-1x pdf-thumb-eye"></i>
</span>
</div>
<img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog">
</a>
</div>
<div class="vertical-social-box"></div>
</div>
<div class="col-md-4">
<div class="pdf-thumb-box">
<a href="#2013-Katalog">
<div class="pdf-thumb-box-overlay"><span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i>
<i class="fa fa-eye fa-stack-1x pdf-thumb-eye"></i>
</span>
</div>
<img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog">
</a>
</div>
<div class="vertical-social-box"></div>
</div>
<div class="col-md-4">
<div class="pdf-thumb-box">
<a href="#2013-Katalog">
<div class="pdf-thumb-box-overlay"><span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i>
<i class="fa fa-eye fa-stack-1x pdf-thumb-eye"></i>
</span>
</div>
<img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog">
</a>
</div>
</div>
</div>回答by vmontanheiro
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
body {
font-family: arial;
font-size: 10pt;
}
.pdf-thumb-box {
position: relative;
overflow: hidden;
display: block;
}
.pdf-thumb-box-overlay {
background: #000;
color: #FFF;
padding: 20px;
position: absolute;
visibility: hidden;
width:100%;
height:100%;
text-align:center;
}
.glyphicon-eye-open{
margin-top:60px;
color:red;
}
img {
width: 362px;
}
</style>
<div class="container">
<div class="col-md-4">
<div class="pdf-thumb-box">
<div class="pdf-thumb-box-overlay">
<a href="#2013-Katalog">
<i class="glyphicon glyphicon-eye-open"></i>
</a>
</div>
<img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog">
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document)ready(function(){
$(".pdf-thumb-box").hover(function() {
var imgWidth = $(this).children("img").width();
var imgHeight = $(this).children("img").height();
var negImgWidth = imgWidth - imgWidth - imgWidth;
$(this).children(".pdf-thumb-box-overlay").fadeTo(0, 0.8);
$(this).css("width", (imgWidth)+"px");
$(this).css("height", (imgHeight)+"px");
$(this).children(".pdf-thumb-box-overlay").css("left", negImgWidth+"px");
$(this).children(".pdf-thumb-box-overlay").css("visibility", "visible");
$(this).children(".pdf-thumb-box-overlay").animate({"left": 0}, 250);
}, function() {
var imgWidth = $(this).children("img").width();
var imgHeight = $(this).children("img").height();
var negImgWidth = imgWidth - imgWidth - imgWidth;
$(this).children(".pdf-thumb-box-overlay").animate({"left": negImgWidth}, 250);
});
});
</script>
