Dynamically changing font-size

Question

This is my current code but as you see, whenever the font-size changes doe to the resizing of the browser width. The hover effect doesn't 1.5x the font-size, how can I make the hover effect dynamically take the current font-size of the text and double it up (1.5x) accordingly?

----> https://jsfiddle.net/054yzoux/ <---------

html

    <nav class="navbar-menu">
    <ul id="list" class="test">
        <li id="emph nav-home">Home</li>
        <li id="nav-portfolio">Portfolie</li>
        <li id="nav-skills">Færdigheder</li>
        <li id="nav-erfaring">Erfaring</li>
        <li id="nav-kontakt">Kontakt mig</li>
    </ul>
</nav>

css

.navbar-menu ul li{
    display: block;
    font-size: 4vw;
    margin-top: 5%;
}

.navbar-menu ul li:hover{
    color: #fff;
    transform: translateX(3%);
    background-color: #888888;
    transition-duration: 0.3s;
    font-size: 2em;
}

Issue To see what the issue is, increase the browser width, when in the jsfiddle and hover over the text. As you see the text decreases instead of increasing by 50%

Answer 1

The problem is arising because for a fixed view, maybe 4vw is less than the 2em on hover that's why it is enlarging the font , but for larger views 2em is smaller than 4vw that's why the glitch effect .

• Instead of 2em (which will always be same for all viewport resolutions) , give a vw value as well which is bigger than 4vw so maybe 5vw (this ensures that on hover, the new font-size will always be greater than the normal font-size since 5vw > 4vw for all viewport resolutions) and it works fine.
• Another point to note is that the transition should be provided o n the default state of element , not when a CSS selector is defined. This ensures that it will take place when the hover occurs as well as taken out.

 .navbar-menu ul li{ display: block; font-size: 4vw; margin-top: 5%; transition:all 0.3s; } .navbar-menu ul li:hover{ color: #fff; transform: translateX(3%); background-color: #888888; font-size: 5vw; } 

 <nav class="navbar-menu"> <ul id="list" class="test"> <li id="emph nav-home">Home</li> <li id="nav-portfolio">Portfolie</li> <li id="nav-skills">Færdigheder</li> <li id="nav-erfaring">Erfaring</li> <li id="nav-kontakt">Kontakt mig</li> </ul> </nav> 

Answer 2

If you want to double the size of font when hover, you should use 'em' unit for both initial and hover states.

The following code will work:

.navbar-menu ul li{
display: block;
font-size: 3em;
margin-top: 5%;}

.navbar-menu ul li:hover{
color: #fff;
transform: translateX(3%);
background-color: #888888;
transition-duration: 0.3s;
font-size: 4em;}

Answer 3

Since you're using animation (transformation), better to use same units for more accurate result.

.navbar-menu ul li{
    ...
    font-size: 4vw;
    ...
}

.navbar-menu ul li:hover{
    ...
    font-size: 6vw;/* will give 50% enlarge effect*/
    ...
}

Here's a demo .