How can I increase my texts font-size over hovering without interacting with other contents?

So,I was testing to give my nav bar links a hover effect of font-sizing.But everytime I hover over an link,other contents(including other links) also interacts and moves from their own places,which is not what I was aiming for. __________________________________________________________________ HTML code - <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="iframe.css" type="text/css"> </head> <body> <nav> <a href="#">Home</a> <a href="#">Menu</a> <a href="#">Options</a> </nav> </body> </html> _________________________________________________________________ CSS code - nav { text-align: center; background-color: rgba(32,32,32,0.2); padding: 5px; padding-top: 80px; width: 100%; height:200px; } a { text-decoration: none; color: darkslateblue; font-weight: bold; padding: 30px; font-size: 16px; } a:hover { font-size: 20px; } ___________________________________________________________ I have tried google,but none of the solutions seem to work for me.Like using line-height,using transform scale,even tried measuring the padding and margin to keep the box area constant so it doesn't move the other contents,etc etc Would be nice if I can get some answers here. TIA ^_^

html css help hover font-size

4th Apr 2017, 6:10 PM

Tayeaba Mila

4 Answers

+ 2

what if you wrap your links in a list, set the list items to be displayed as blocks and set width and height to them so they won't grow when the text gets bigger? max-width should do the trick.

4th Apr 2017, 5:56 PM

Mario L.

+ 1

@Mario L. Maybe I am asking too much,but can you give me a demo of the li css code? I've tried some techniques according to your method but doesn't seem to be working.My problem is that other links moves from their places while I hover over one - https://media.giphy.com/media/pcScYZd1ezwFG/giphy.gif @Fuat Seven It will just make it more scrambled and overflow on each other.Won't work,but thanks for the reply though,much appreciated. :)

4th Apr 2017, 7:33 PM

Tayeaba Mila

+ 1

You can try this: https://code.sololearn.com/W0C7Njt0nl9Q/#html (like if it helps)

5th Apr 2017, 4:06 AM

Calviղ