When using transition , the text is enlarged, but with it all other elements are shifted. How to make it so that only text increases without changing the overall markup.

ps - I know that this is something you need to come up with a position , but I’m not sure what and where.

http://jsfiddle.net/Lnjmj7zu/2/ - code and style to it

 nav { padding-top: 30px; height: 150px; } nav ul { height: 40px; padding-top: 5px; background-image: url(image/nab_back.png); } nav ul li { display: inline; border-right: 1px solid; border-color: #5c5656; } nav ul li:last-child { border-right: 0px; } nav ul li a { text-decoration: none; color: #2a2a2a; font-size: 16pt; padding: 0px 10px 0 10px; } nav ul li a:hover { border-bottom: 2px solid #e2e2e2; font-size: 18pt; transition: all 0.3s; } 
 <nav> <ul> <li><a href="#">Index</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Guides</a></li> <li><a href="#">Tactics</a></li> <li><a href="#">Garison</a></li> <li><a href="professions.html">Professions</a></li> </ul> </nav>

  • If you don't like the shift only in height - you can set the line-height desired size - xaja

1 answer 1

Try with transform: scale(n)

 nav { padding-top: 30px; height: 150px; } nav ul { height: 40px; padding-top: 5px; background-image: url(image/nab_back.png); } nav ul li { display: inline; border-right: 1px solid; border-color: #5c5656; } nav ul li:last-child { border-right: 0px; } nav ul li a { text-decoration: none; color: #2a2a2a; font-size: 16pt; padding: 0px 10px 0 10px; border-bottom: 2px solid rgba(255,255,255,0); display:inline-block; transition: all 0.3s; } nav ul li a:hover { border-bottom: 2px solid #e2e2e2; transform: scale(1.1); -webkit-transform: scale(1.1); } 
 <nav> <ul> <li><a href="#">Index</a> </li> <li><a href="#">Forum</a> </li> <li><a href="#">Guides</a> </li> <li><a href="#">Tactics</a> </li> <li><a href="#">Garison</a> </li> <li><a href="#">Professions</a> </li> </ul> </nav>