title: Scale Bootstrap Column on Hover
body: <p>I've been trying to create a zoom, pop out effect for a group of grid boxes in Bootstrap 3. The problem I am having is the zoom effect is causing the bottom columns to be pushed down since there is height being added. Is there a way to have the boxes directly on top of grid items without pushing the others down?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row-programs row"&gt;
      &lt;div class="col-program col-md-3 clearfix"&gt;
        &lt;h2&gt;Program Title&lt;/h2&gt;
        &lt;div class="col-button"&gt;
          &lt;a href="" class="btn btn-primary"&gt;Learn More&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-program col-md-3 clearfix"&gt;
        &lt;h2&gt;Program Title&lt;/h2&gt;
        &lt;div class="col-button"&gt;
          &lt;a href="" class="btn btn-primary"&gt;Learn More&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-program col-md-3 clearfix"&gt;
      &lt;h2&gt;Program Title&lt;/h2&gt;
      &lt;div class="col-button"&gt;
        &lt;a href="" class="btn btn-primary"&gt;Learn More&lt;/a&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row-programs row"&gt;
      &lt;div class="col-program col-md-3 clearfix"&gt;
        &lt;h2&gt;Program Title&lt;/h2&gt;
        &lt;div class="col-button"&gt;
          &lt;a href="" class="btn btn-primary"&gt;Learn More&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-program col-md-3 clearfix"&gt;
        &lt;h2&gt;Program Title&lt;/h2&gt;
        &lt;div class="col-button"&gt;
          &lt;a href="" class="btn btn-primary"&gt;Learn More&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-program col-md-3 clearfix"&gt;
      &lt;h2&gt;Program Title&lt;/h2&gt;
      &lt;div class="col-button"&gt;
        &lt;a href="" class="btn btn-primary"&gt;Learn More&lt;/a&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/codesnippetsguru/pen/jWEBmM" rel="nofollow">http://codepen.io/codesnippetsguru/pen/jWEBmM</a></p>