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

Question

我无法在保持间距宽度的情况下将图像与标题的宽度对齐。我正在使用 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);
}

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