css - 在悬停时缩放 Bootstrap 列

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