文章/答案/技术大牛

发布

社区首页 >问答首页 >引导中具有缩放效果的图像悬停字幕

问引导中具有缩放效果的图像悬停字幕
EN

Stack Overflow用户

提问于 2015-07-27 08:39:32

回答 1查看 7.8K关注 0票数 0

我无法对齐图片与标题的宽度保持沟槽宽度。我是使用引导和图像是流动以外的div在悬停。有人能帮我吗？

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

Pen：http://codepen.io/anon/pen/XbxOMq

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

html

twitter-bootstrap

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-07-27 09:26:31

您应该为这两个类制作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;
}

这是一个小提琴

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31648492

复制

相似问题

问引导中具有缩放效果的图像悬停字幕
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导中具有缩放效果的图像悬停字幕EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导中具有缩放效果的图像悬停字幕
EN