Link to grow font on hover

Question

I have a list of links, and when they freeze, I want the font to expand smoothly.

The font is currently growing instantly, even when using transition .

 #menuHeader { font-weight: bold; } .link { text-decoration: none; } .menuItem { list-style-type: none; margin-bottom: 10px; } .menuLink { transition-property: font-size; transition-property: color; transition-duration: 0.3s; font-size: 16px; color: #000000; } .menuLink:hover { transition-property: font-size; transition-property: color; transition-duration: 0.3s; font-size: 20px; color: #97d700; } 

 <ul> <li class="menuItem" id="menuHeader">Title</li> <li class="menuItem"><a class="link menuLink" href="/">Link 1</a></li> <li class="menuItem"><a class="link menuLink" href="/">Link 2</a></li> <li class="menuItem"><a class="link menuLink" href="/">Link 3</a></li> </ul> 

This is an example page.

https://www.roidna.com/services/

The bonds attached to the blocks grow when they hang.

Answer 1

You have something predominant. You should declare them in one line:

 transition: color 0.5s, font-size 0.5s; 

 #menuHeader { font-weight: bold; } .link { text-decoration: none; } .menuItem { list-style-type: none; margin-bottom: 10px; } .menuLink { -webkit-transition: color 0.5s, font-size 0.5s; transition: color 0.5s, font-size 0.5s; font-size: 16px; color: #000000; } .menuLink:hover { font-size: 20px; color: #97d700; } 

 <ul> <li class="menuItem" id="menuHeader">Title</li> <li class="menuItem"><a class="link menuLink" href="/">Link 1</a></li> <li class="menuItem"><a class="link menuLink" href="/">Link 2</a></li> <li class="menuItem"><a class="link menuLink" href="/">Link 3</a></li> </ul> 

Answer 2

 .menuLink { font-size: 16px; color: #000000; -webkit-transition: color 0.3s, font-size 0.3s; -moz-transition: color 0.3s, font-size 0.3s; -o-transition: color 0.3s, font-size 0.3s; transition: color 0.3s, font-size 0.3s; } .menuLink:hover { font-size: 20px; color: #97d700; } 

Maybe this will help you

Answer 3

The transition should only apply to the .menuLink class. We do not use it for freezing. Just change the code to the following code.

 .menuLink { transition: font-size 300ms ease-in-out; font-size: 16px; color: #000000; } .menuLink:hover { font-size: 20px; color: #97d700; } 

Answer 4

I think you might like the CSS syntax:

 transform: scale(1.1); 

This may work better as it does not affect other links.