css - 发生 css 转换时如何阻止我的文本移动

Question

我有一个框，其中包含同时发生的两个独立的 css 转换。

当转换发生时，图标下方的标题和段落文本移动位置

参见 JS Fiddle:http://jsfiddle.net/Lsnbpt8r/

这是我的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>

这是我的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 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 在动画期间不会移动。