我无法通过保持装订线宽度将图像与标题的宽度对齐。我正在使用引导程序，并且图像在悬停时正在div外部流动。有人可以帮我吗？
这就是我想要达到的目标：https ://awwapp.com/s/43b68655-83a6-4133-ab28-0ec9a4152316/
笔：http : //codepen.io/anon/pen/XbxOMq
HTML：热点文本f
<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;
}
并且您应该使用引导程序覆盖默认情况下在左侧和右侧设置的填充。这样，图像将具有div的整个宽度。
.col-lg-4 ,.col-md-4,col-sm-4,col-xs-4{
padding-left:0px;
padding-right:0px;
}
这是小提琴
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句