Question

我一直在尝试为Bootstrap 3中的一组网格框创建一个缩放，弹出效果。我遇到的问题是缩放效果导致底部列被向下推，因为有高度被添加。有没有办法让盒子直接放在网格物品的顶部而不会推倒其他物品？

HTML

<div class="container">
  <div class="row-programs row">
    <div class="col-program col-md-3 clearfix">
      <h2>Program Title</h2>
      <div class="col-button">
        <a href="" class="btn btn-primary">Learn More</a>
      </div>
    </div>
    <div class="col-program col-md-3 clearfix">
      <h2>Program Title</h2>
      <div class="col-button">
        <a href="" class="btn btn-primary">Learn More</a>
      </div>
    </div>
    <div class="col-program col-md-3 clearfix">
    <h2>Program Title</h2>
    <div class="col-button">
      <a href="" class="btn btn-primary">Learn More</a>
    </div>
    </div>
  </div>
  <div class="row-programs row">
    <div class="col-program col-md-3 clearfix">
      <h2>Program Title</h2>
      <div class="col-button">
        <a href="" class="btn btn-primary">Learn More</a>
      </div>
    </div>
    <div class="col-program col-md-3 clearfix">
      <h2>Program Title</h2>
      <div class="col-button">
        <a href="" class="btn btn-primary">Learn More</a>
      </div>
    </div>
    <div class="col-program col-md-3 clearfix">
    <h2>Program Title</h2>
    <div class="col-button">
      <a href="" class="btn btn-primary">Learn More</a>
    </div>
    </div>
  </div>
</div>

CSS

.row-programs .col-program {
  position: relative;
  padding: 0;
  min-height: 250px;
  background-color: #EDEDED;
  zoom: 1;
  transition: zoom 1.5s ease;
}
.row-programs .col-program h2 {
  text-align: center;
}
.row-programs .col-program:hover {
  margin-top: -10px;
  background-color: #fafafa;
  transition: all 0.4s ease-in-out;
  zoom: 1.1;
}
.row-programs .col-program .col-button {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 45px;
  text-align: center;
}
.row-programs .col-program .col-button .btn {
  margin-top: 5px;
}

http://codepen.io/codesnippetsguru/pen/jWEBmM

Answer 1

这样的事情能满足你吗？（没有变焦过渡，因为它会导致布局跳跃）

   &:hover {
      margin-top: -10px;
      margin-bottom: -15px;
      background-color: lighten(#EDEDED, 5%);
      transition: background-color .4s ease-in-out;
      z-index: 1;
      zoom: 1.1;
    }

http://codepen.io/anon/pen/qbEmKd

悬停时缩放引导列

1 个答案: