How do I stop the text placement?

I am using a simple hover to increase the font size of the h1 tag. However, the other text elements are moved down while I am using the hover. I don’t want the other text elements to be moved. I just want them in the same position.
Please provide a solution.
CSS

<style>
h1:hover{
background-color:orange;
font-size:50px;
color:white;
}
</style>

HTML

<body>
<h1>This is Perumal</h1>
<P> He is from India </p>
<h2> He is also known as verde </h2>
</body>

The increased size disrupts the document flow and pushed things after the h1 down.
You could use a scale transform to make the text bigger without altering the flow.

h1:hover{
background-color:orange;
transform: scale(1.1); /* Adjust scale to suit */
color:white;
}
1 Like

Thank you. SAMA74…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.