hover

[Hosun]

Hi,

When I give "padding" upon hover to make a orange box wider, all the lists shift to the left.

How can I fix it?

Hosuns Portfolio 3

Hosun Kang

[pziecina]

If you want something to enlarge, (or shrink) on hover you dont change the padding or other css. Instead you use css transform, (scale) see -

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

[osgood_ · Accepted solution]

Its not considered good practice to change the dimensions of links button on hover as the layout will look odd as you have discovered. A better practice is to change the links background color or add a bottom border to the link.

If you add a dimension on hover to a link then normally you would factor the same dimension into the default link to compensate for the change in appearance on hover.

[B i r n o u]

not always, in an accesibility approach it can be very usefull and helfull

https://www.tutorialrepublic.com/faq/how-to-transform-image-size-on-mouse-hover-without-affecting-th...​

but Paula said it first...

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

not always, in an accesibility approach it can be very usefull and helfull

https://www.tutorialrepublic.com/faq/how-to-transform-image-size-on-mouse-hover-without-af fecting-t...

but Paula said it first...

Let me clarify. I personally don't think it's that good approach to alter the dimensions of navigation links IF it creates some unwanted situations in a page layout as in this case it clearly did, otherwise the OP would not have posted. A sudden unexpected change in layout, which the default hover would deliver,  is never good for an end user but yes if you want to zoom, and I disagree where links are concerned, at least do it a bit more smoothly using css transitions, so the user is not so 'shocked' at the change.

You need to make subjective decisions where best to deploy effects, obviously this is going to be different depending on your tastes. Some just deploy effect all over the place because its possible, usually not a nice result.

If a naviagtion button is zoomed, without displacing the navigation buttons around it, although a bit twee in my opinion, it would be more accepatable rather than other elements jumping eratically around in recaction to a specific element being effected, but its being sensible and executing the result subtely that counts.

[B i r n o u]

osgood_  a écrit

Let me clarify. I personally don't think it's that good approach to alter the dimensions of navigation links IF it creates some unwanted situations in a page layout as in this case it clearly did, otherwise the OP would not have posted. A sudden unexpected change in layout, which the default hover would deliver,  is never good for an end user but yes if you want to zoom,

diifent point of view... for what I think it works quite nice

CSS3 Image Transform Gallery

but perhaps the OP doesn't like it... who knows ?

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

osgood_   a écrit

Let me clarify. I personally don't think it's that good approach to alter the dimensions of navigation links IF it creates some unwanted situations in a page layout as in this case it clearly did, otherwise the OP would not have posted. A sudden unexpected change in layout, which the default hover would deliver,  is never good for an end user but yes if you want to zoom,

diifent point of view... for what I think it works quite nice

CSS3 Image Transform Gallery

but perhaps the OP doesn't like it... who knows ?

That is acceptable (not that I like it much in a naviagtion senario). As I said in my previous thread the movement doesnt affect the positioning of the co-existing navigation items around it, so its non-disruptive to the page layout.