Как остановить мой текст от перемещения при переходе css

Question

У меня есть коробка с двумя отдельными переходами css, которые происходят одновременно.

Когда переходы происходят заголовок и текст абзаца под значком перемещается Поместите

См JS скрипку: http://jsfiddle.net/Lsnbpt8r/

Heres мой HTML

<div class="row">    
     <div class="col-md-4 text-center transistion"> 
      <div class="box"> 
      <i class="circle-pos circle glyphicon glyphicon-home icon"></i> 
       <h3 class="heading"> 
       Construction 
       </h3> 
       <p>This is how we do it</p> 
      </div> 
     </div> 

     <div class="col-md-4 text-center transistion"> 
      <div class="box"> 
      <i class="circle-pos circle glyphicon glyphicon-wrench icon"></i> 
       <h3 class="heading"> 
       Interior Design 
       </h3> 
       <p>This is how we do it</p> 
      </div> 
     </div> 

     <div class="col-md-4 text-center transistion"> 
      <div class="box"> 
      <i class="circle-pos circle glyphicon glyphicon-thumbs-up icon"></i> 
       <h3 class="heading"> 
       Service 
       </h3> 
       <p>This is how we do it</p> 
      </div> 
     </div> 
     </div> 

Heres мой CSS

 .icon { 
     font-size: 32px; 
     vertical-align: middle; 
     padding-top: 35px; 
     padding-right: 9px; 
    } 
    .icon:hover{ 
     font-size: 48px; 
     color: #003176; 
     padding-top: 25px; 
     padding-right: 5px; 
    } 
    .circle { 
     width: 120px; 
     height: 120px; 
     -moz-border-radius: 50%; 
     -webkit-border-radius: 50%; 
     border-radius: 50%; 
     background: #f3f3f3; 
      -webkit-transition: all 300ms linear; 
     -moz-transition: all 300ms linear; 
     -o-transition: all 300ms linear; 
     -ms-transition: all 300ms linear; 
     transition: all 300ms linear; 

    } 
     .box:hover .circle{ 
      width: 100px; 
      height: 100px; 
      background: #f7f7f7; 
     } 
     .circle-pos{ 
      margin-top: -60px; 
     } 
     .box:hover .circle-pos{ 
      margin-top: -50px; 
     } 
     .box:hover .icon{ 
      font-size: 48px; 
      color: #003176; 
      padding-top: 25px; 
      padding-right: 5px; 
     } 
    .box{ 
     border: 0px 1px 2px 1px solid #f1f1f1; 
     border-top: 5px solid #003176; 
     height: 150px; 
     font-size: 18px; 
     -webkit-transition: all 300ms linear; 
     -moz-transition: all 300ms linear; 
     -o-transition: all 300ms linear; 
     -ms-transition: all 300ms linear; 
     transition: all 300ms linear; 
    } 
    .box:hover{ 
     background-color: #135379; 
     color: #b9f9ff; 
    } 

    .heading{ 
    padding: 50px 0 12px 0; 
    margin: 0 0 25px 0; 
    height: 24px; 
    position: relative; 
    text-transform: uppercase; 
    letter-spacing: -0.03em; 
    } 
    .transistion{ 
     padding-top: 60px; 
    } 

Я установил фиксированную высоту в поле, но это не останавливает перевод текста, любая помощь или совет будут оценены.

Answer 1

Добавить дополнительный div для h3 и текст ниже, в этом случае я назвал его .bottombox. Затем я дал свойство position:absolute, чтобы я мог вытащить его из потока оставшихся элементов, то есть на него не повлияли изменения размера, отступов и полей вашей анимации.

Таким образом, ваш HTML выглядит следующим образом:

<div class="row"> 
    <div class="col-md-4 text-center transistion"> 
     <div class="box"> <i class="circle-pos circle glyphicon glyphicon-home icon"></i> 

      <div class="bottombox"> 
       <h3 class="heading"> 
        Construction 
        </h3> 

       <p>This is how we do it</p> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-4 text-center transistion"> 
     <div class="box"> <i class="circle-pos circle glyphicon glyphicon-wrench icon"></i> 

      <div class="bottombox"> 
       <h3 class="heading"> 
        Interior Design 
        </h3> 

       <p>This is how we do it</p> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-4 text-center transistion"> 
     <div class="box"> <i class="circle-pos circle glyphicon glyphicon-thumbs-up icon"></i> 

      <div class="bottombox"> 
       <h3 class="heading"> 
        Service 
        </h3> 

       <p>This is how we do it</p> 
      </div> 
     </div> 
    </div> 
</div> 

---

, а затем это ваш CSS:

.icon { 
    font-size: 32px; 
    vertical-align: middle; 
    padding-top: 35px; 
    padding-right: 9px; 
} 
.icon:hover { 
    font-size: 48px; 
    color: #003176; 
    padding-top: 25px; 
    padding-right: 5px; 
} 
.circle { 
    width: 120px; 
    height: 120px; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    background: #f3f3f3; 
    -webkit-transition: all 300ms linear; 
    -moz-transition: all 300ms linear; 
    -o-transition: all 300ms linear; 
    -ms-transition: all 300ms linear; 
    transition: all 300ms linear; 
} 
.circle:hover { 
    width: 100px; 
    height: 100px; 
    background: #f7f7f7; 
} 
.circle-pos { 
    margin-top: -60px; 
} 
.circle-pos:hover { 
    margin-top: -50px; 
} 
.box { 
    border: 0px 1px 2px 1px solid #f1f1f1; 
    border-top: 5px solid #003176; 
    height: 200px; 
    -webkit-transition: all 300ms linear; 
    -moz-transition: all 300ms linear; 
    -o-transition: all 300ms linear; 
    -ms-transition: all 300ms linear; 
    transition: all 300ms linear; 
    position:relative; 
} 
.box:hover { 
    background-color: #135379; 
} 
.heading { 
    padding: 60px 0 12px 0; 
    margin: 0 0 13px 0; 
    height: 24px; 
    text-transform: uppercase; 
    letter-spacing: -0.03em; 
} 
.bottombox { 
    bottom:20px; 
    left:0; 
    width:100%; 
    text-align:center; 
    position: absolute; 
} 
.transistion { 
    padding-top: 60px; 
} 

, конечно, вы можете сделать некоторые изменения, если это необходимо, но это больше или менее его суть

see fiddle

Answer 2

Проблема заключается в том, что ваш текст расположен относительно круга, а круг становится меньше при переходе. Вы можете добавить что-то вроде этого margin-bottom: 10px; к вашему .circle:hover{}, но это заставит текст колебаться во время перехода, поэтому я бы рекомендовал сделать текст позиционированным абсолютным.

Answer 3

Wrap значок в контейнере:

<div class="icon-container"> 
     <i class="circle-pos circle glyphicon glyphicon-home icon"></i> 
</div> 

И дать ему фиксированную высоту:

.icon-container { 
    height: 50px; // Or whatever you want 
} 

Работы сглаживать для меня (я только применил его к первой иконке): http://jsfiddle.net/63Lbwonf/2/ Вы можете играть с числами. Я просто бросил там 50px и зафиксировал высоту контейнера, чтобы H1 не двигался во время анимации.