gpt4 book ai didi

javascript - Bootstrap : hover overlay (via css) is bigger than image

转载 作者:太空宇宙 更新时间:2023-11-04 07:07:34 25 4
gpt4 key购买 nike

我是一个非常基础的编码员,所以如果我的问题听起来很愚蠢,请多多包涵。我正在使用 Bootstrap 3 制作某种图库页面,因此顶部有类别过滤器,以及响应式图像行(桌面上水平 3 个,平板电脑上 2 个,移动设备上 1 个)。所以我目前正在使用一个灯箱插件,当用户点击缩略图时,它会显示一个灯箱。所以这是 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 的额外边分区有人能帮忙吗?非常感谢!!

最佳答案

这是最短的解决方案。

改变这个:

.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;
}

关于javascript - Bootstrap : hover overlay (via css) is bigger than image,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51468351/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com