Question

我无法将图像与标题宽度对齐并保持水槽宽度。我正在使用自举，并且图像在悬停时在div之外流动。有人可以帮帮我吗？

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

HTML： HOTSPOT TEXTf

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

Answer 1

你应该像这样为这两个类制作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

图像悬停标题，在引导程序中具有缩放效果

1 个答案: