gpt4 book ai didi

html - 在 bootstrap 中具有缩放效果的图像悬停标题

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

我无法在保持间距宽度的情况下将图像与标题的宽度对齐。我正在使用 Bootstrap ,并且图像在悬停时在 div 之外流动。有人可以帮我吗?

这就是我想要实现的目标:https://awwapp.com/s/43b68655-83a6-4133-ab28-0ec9a4152316/

笔:http://codepen.io/anon/pen/XbxOMq

HTML : 热点文本

<div class="col-md-4 hotspot-wrapper">
<img src="https://newevolutiondesigns.com/images/freebies/hd-widescreen-wallpaper-3.jpg" alt="..." class="img-responsive">
<div class="hotspot-text">
HOTSPOT TEXTf
</div>
</div>
</div>

<div class="col-md-4 hotspot-wrapper">
<img src="https://newevolutiondesigns.com/images/freebies/hd-widescreen-wallpaper-3.jpg" alt="..." class="img-responsive">
<div class="hotspot-text">
HOTSPOT TEXTf
</div>
</div>
</div>

CSS:

.hotspot-wrapper {
position: relative;
overflow: hidden;
margin-bottom:20px;
}
.hotspot-text {
width:100%;
height: 102px;
position: absolute;
bottom: -50px;
transition: all .2s linear;
background: rgba(0,0,0,.7);
color:#fff;
}
.hotspot-wrapper:hover .hotspot-text {
bottom: 0;
}

.hotspot-wrapper img {

-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

.hotspot-wrapper:hover img {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}

最佳答案

你应该像这样为这两个类制作你的 CSS,这样文本的热点将与图像对齐:

.hotspot-text {

height: 102px;
position: absolute;
bottom: -50px;
right:0px;
left:0px;
transition: all .2s linear;
background: rgba(0,0,0,.7);
color:#fff;
}
.hotspot-wrapper:hover .hotspot-text {
bottom: 0;
left:0;
right:0;
}

并且您应该使用 bootstrap 覆盖默认设置的左侧和右侧的填充。这样,图像将具有 div 的整个宽度。

.col-lg-4 ,.col-md-4,col-sm-4,col-xs-4{
padding-left:0px;
padding-right:0px;
}

这是一个 Fiddle

关于html - 在 bootstrap 中具有缩放效果的图像悬停标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31648492/

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