How do I stop my text from moving when css transition occurs

Question

I have a box with two separate css transistions that occur at the same time.

When the transitions occur the heading and paragraph text underneath the icon moves position

See JS Fiddle: http://jsfiddle.net/Lsnbpt8r/

Heres my 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 my 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;  
    }

I have set a fixed height to the box but this does not stop the text from moving, any help or advice would be appreciated.

Answer 1

Wrap your icon in a container:

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

And give it a fixed height:

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

Works smooth for me (I only applied it to the first icon): http://jsfiddle.net/63Lbwonf/2/ You can play withe the numbers. I just threw 50px on there and it fixed the container height so the H1 doesn't move during animation.

Answer 2

Add an additional div for the h3 and the text below, in this case I have named it .bottombox. Then I gave it a position:absolute property so I can take it out of the flow of the remaining elements, meaning it won't be affected by the changes in size, padding and margin of your animation.

Thus, your HTML goes like this:

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

---

and then this is your 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;
}

of course you can make some changes if needed, but this is more or less the gist of it

see fiddle

Answer 3

The problem is your text is positioned relative to the circle, and the circle is getting smaller in the transition. You could add something like this margin-bottom: 10px; to your .circle:hover{}, but that will make the text wobble during the transition, so i'd recommend to make the text positioned absolute.