Html Question posted in
Some basic documentation can be found here.

How to zoom on text on hover using scss and html

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.

Tags:

2

Answers


  1. 0

    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

    section.hero .wrd-content:hover {
  transform: scale(1.5);
  transform-origin: center;
  transition: transform 0.2s;
}
    <section class="hero">
        <div class="wrd-content">
            <h2>Hello... I am</h2>
            <h1>FirstName<br>LastName</h1>
            <hr></hr>
        </div>
</section>
    Login or Signup to reply.
  2. 0

    I tried your code and it worked for me.
    Did you make sure to include the CSS properly in the HTML file?
    So with:

    <link rel="stylesheet" href="PathToYourCSS.css">

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search