bootstrap:鼠标悬停覆盖(通过css)大于图像
bootstrap:鼠标悬停覆盖(通过css)大于图像
提问于 2018-07-23 02:59:33
我是一个非常基础的程序员，所以如果我的问题听起来很愚蠢，请容忍我。我正在使用Bootstrap 3来制作某种画廊页面，因此在顶部有类别过滤器，并有响应的图像行(3个水平在桌面上，2个在平板电脑上，1个在移动上)。所以我现在使用的是lightbox插件，当用户点击缩略图时，它会显示一个lightbox。下面是HTML中的代码：
<div class="container">
<div class="row">
<div align="center" class="filter-categories">
<button class="btn btn-default filter-button" data-filter="all">all</button>
<button class="btn btn-default filter-button" data-filter="fine-art">fine art</button>
<button class="btn btn-default filter-button" data-filter="actor-portraits">portraits</button>
<button class="btn btn-default filter-button" data-filter="landscape">landscape</button>
<button class="btn btn-default filter-button" data-filter="street">street</button>
</div>
</div>
<br/>
<div class="row" align="center">
<!-- fine art-->
<div class="gallery_product filter fine-art col-md-4 col-sm-6 col-xs-12">
<a href="images/fine art photography/image-1.jpg" data-lightbox="gallery" data-image-alt="Image 1"> <img src="images/fine art photography/image-1.jpg" alt="Alt Text" class="gallery-image" />
<div class="overlay">
<div class="text">Hello World</div>
</div>
</a> </div>
...因此，当单击<!-- fine art-->时，它会显示为一个灯箱，并且会出现箭头以导航到下一个图像。对于overlay来说，当鼠标悬停在图片缩略图上时，一个带有text的黑框应该会出现，但由于某种奇怪的原因，它在col-md-4 col-sm-6 col-xs-12的左右两边多了15px。下面是该部分的CSS
/*hover effect*/
/*.gallery_product.col-md-4.col-sm-6.col-xs-12{
padding: 0 !important;
}*/
.gallery_product {
position: relative;
top:0;
left: 0;
}
.gallery-image {
display: block;
width: 100%;
height: auto;
}
.gallery_product {
margin-bottom: 30px;}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #121212;
}
.gallery_product:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}padding: 0 !important只是简单地删除了磁贴之间的空格。我仍然希望保持瓦片之间的空间，但保持瓦片内的覆盖。我试过这个：
<!-- fine art-->
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="gallery_product filter fine-art">
<a href="images/fine art photography/image-1.jpg" data-lightbox="gallery" data-image-alt="Image 1"> <img src="images/fine art photography/image-1.jpg" alt="Alt Text" class="gallery-image" />
<div class="overlay">
<div class="text">Hello World</div>
</div>
</a> </div></div>它给了我想要的东西，但是我的data-lightbox将无法工作，“下一步”和“上一步”按钮将被禁用。因此，从本质上讲，我需要第一段代码，但要删除overlay目录的多余部分。有人能帮上忙吗？非常感谢！
回答 1
Stack Overflow用户
发布于 2018-07-23 05:59:06
这是最短的解决方案。
更改此设置：
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #121212;
}要这样做：
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 15px;
right: 15px;
/* height: 100% */;
/* width: 100% */;
opacity: 0;
transition: .5s ease;
background-color: #121212;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51468351
复制相关文章
相似问题