Member Avatar for pb404

I have an <UL> with each <li> being arranged inline for my navigation. Each <li> has a transition that enlarges the text when hovered over. The problem is that when the text enlarges it causes the text to the left and right of it to move outward to make room for the enlargment. I'm trying to figure out how to keep the text from causing the neighboring text to move over when it enlarges. Thanks for any help. Below is the CSS I'm using if it is of any help.

#menu                   {
                        text-align: center;
                        margin: 0;
                        height: 24px;
                        padding: 2px 8px 0px 8px;
                        background-color: black;
                        }

#menu a                 {
                        font-size: 1.1em;
                        color: white
                        -o-transition: all .3s linear;
                        -ms-transition: all .3s linear;
                        -moz-transition: all .3s linear;
                        -webkit-transition: all .3s linear;
                        transition: all .3s linear;
                        }

#menu a:hover           {
                        color: red;
                        font-size: 1.2em;
                        }

#menu li                {
                        margin: 0px;
                        padding: 0px 5px 0px 5px;
                        display: inline;
                        }
  • 2 Contributors
  • 4 Replies
  • 1K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by pb404

Dani AI

Generated

As found, switching from changing font-size to using CSS transforms is the right move: transforms don't cause layout reflow, so neighboring items stay put. The cross-browser quirks seen (color jumping in Chrome, transforms not animating in Firefox) are commonly caused by transforming inline elements, using broad transition: all, or missing compositor hints. Best practice is to make the interactive element block-level (or inline-block), transition only color and transform, and add a compositor hint like will-change or a 3D hint so the animation stays smooth.

A compact, cross-browser-friendly pattern (different from the code already shown in the thread):

#menu { display:flex; justify-content:center; padding:.5rem 0; background:#000; }
#menu a { display:inline-block; color:#fff; transition: color .2s ease, transform .2s ease; will-change: transform, color; }
#menu a:hover, #menu a:focus { color:#f00; transform: translateY(-3px) scale(1.08); }
@media (prefers-reduced-motion: reduce) { #menu a { transition:none; transform:none; } }

For an overlay-style effect that never shifts siblings, ' suggestion to use position:absolute with z-index is valid: give each li position:relative, absolutely position the hover element inside it, and ensure keyboard focus is handled (keep visible focus outlines or provide accessible replacements). Performance tip: prefer transforms and opacity for animations; avoid animating layout properties like margin, padding, or font-size.

Member Avatar for pb404

I changed the CSS to use transform: scale(1.1) instead of just specifying a new font size and it solved the issue of the text being pushed outward, but now my transition to color: red; on hover is not transitioning, it just changes abruptly and the font size reverts back to original size after the transition. This is using Chrome. I just tried it in Firefox and the color transition works fine but the transform: scale(1.1); does not work at all.

I really appreciate any assistance.

New code (better than the original?)

#menu                   {
                        text-align: center;
                        margin: 0;
                        height: 24px;
                        padding: 2px 8px 0px 8px;
                        background-color: black;
                        }

#menu a                 {
                        font-size: 1.1em;
                        color: white;
                        -o-transition: all 300ms ease-in;
                        -ms-transition: all 300ms ease-in;
                        -moz-transition: all 300ms ease-in;
                        -webkit-transition: all 300ms ease-in;
                        transition: all 300ms ease-in;
                        }

#menu a:hover           {
                        color: red;
                        -webkit-transform: scale(1.1);
                        -moz-transform: scale(1.1);
                        -o-transform: scale(1.1);
                        -ms-transform: scale(1.1);
                        transform: scale(1.1);
                        }

#menu li                {
                        margin: 0px;
                        padding: 0px 5px 0px 5px;
                        display: inline;
                        }
Member Avatar for pb404

I guess I answered my own question. Lots of tinkering later this works...

#menu                   {
                        margin-top: 0px;
                        margin-left: 160px;
                        margin-right: auto;
                        min-height: 24px;
                        padding: 27px 0px 0px 8px;
                        background-color: black;
                        overflow: hidden;
                        list-style-type: none;
                        }

#menu li                {
                        margin: 0px 9px 0px 9px;
                        float: left;
                        -o-transition: all 100ms;
                        -ms-transition: all 100ms;
                        -moz-transition: all 100ms;
                        -webkit-transition: all 100ms;
                        transition: all 100ms;
                        }

#menu li:hover          {
                        transform: translate(0px,-1px) scale(1.1);
                        }

#menu li a:hover        {
                        color: red;
                        }
Member Avatar for mitchell.schols

hmm i would say position absolute with a zindex so it doesn't interfear with your other blocks

Member Avatar for pb404

Thank you I will add that.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.