I’m newer to html and I am curious about hover effects currently. I want text on hover to scale up 1.5 for 0.2s. It didn’t do anything. It could be an issue with the scss title.
I wrote this..
<section class="hero">
<div class="wrd-content">
<h2>Hello... I am</h2>
<h1>FirstName<br>LastName</h1>
<hr></hr>
</div>
</section>
and
section.hero .wrd-content:hover
{
transform: scale(1.5);
transition: transform 0.2s;
}
I’m just a little lost on where I went wrong.
2
Answers
you may want to add the transform-origin property to ensure that the text scales from its center point rather than the top left corner
I tried your code and it worked for me.
Did you make sure to include the CSS properly in the HTML file?
So with:
You would then have to insert this in the header area of the HTML file.
I hope I was able to help you and wish you lots of success and fun.