Font size transition moving the rest of my page down

1

I have a heading in my code that I’m transitioning the font size of during mouseover:

h1 {
font-family: ‘Lobster’, Sans-serif;
font-size: 6.8em;
color: #337ab7;
padding: 0;
margin-top: 0px;
transition: color 0.8s ease-out, font-size 0.25s ease-out;
}
h1:hover {
font-size: 8em;
color: #ff8900;
}

When you mouseover the text, it is moving the contents below it down as the heading expands. I’m having quite a bit of trouble fixing that issue so the content below is fixed. Any help would be appreciated.

2

That is expected behaviour, the heading is within the flow of the page so if you want it to not affect the elements underneath, you have to remove it from the page flow. One way to do this is to use absolute positioning on your heading.

(Posting your CodePen will probably get you more specific responses)