Scale Bootstrap Column on Hover

Я пытаюсь создать эффект масштабирования, pop out для группы ячеек сетки в Bootstrap 3. Проблема, с которой я сталкиваюсь, - это эффект масштабирования, который приводит к тому, что нижние столбцы будут сдвинуты вниз добавляется высота. Есть ли способ иметь ящики непосредственно поверх элементов сетки, не отталкивая остальных?Scale Bootstrap Column on Hover

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

источник

2015-12-07 Myoji

Возможный дубликат [Масштабирование изображения влияет на другие элементы вокруг целевого изображения] (http://stackoverflow.com/questions/16561534/scaling-an-image-effects-other-elements-around-the-target-image) – isherwood

Не используете ли вы transform: scale (x); ?? http://codepen.io/anon/pen/zrxZML –

ли что-то подобное вы удовлетворяете? (Без перехода для увеличения, так как это может вызвать расположение скачков)

&: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

источник

2015-12-07 22:31:59 Senthe

Scale Bootstrap Column on Hover

ответ

Смежные вопросы