CODEWITHSUNDEEP
css
Krullmizter
Krullmizter

Reputation: 567

on hover scale elements gets pushed

I'm creating a menu for a client and I got at hover effect on like this on two anchor elements: 

a {
  margin: 0 2.5%;
  transition: transform .5s;
  text-align: center;
  font-weight: 500;

  &:hover,
  &:active {
    font-weight: 600;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

This works fine but when I then hover over the link the link on the side of it gets pushed a bit. I reckon this is because the scale scales up the margin to or the width, but yeah can't seem to figure out how to do it properly.

Edit

I changed out the -webkit-transform: scale(1.2); transform: scale(1.2); to -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); And got it workin, thanks all!

Upvotes: 0

Views: 145

Answers (2)

Martin Homola
Martin Homola

Reputation: 245

Of course, it is caused by font-weight. When you do :hover, link will immediately change to different font-weight and for this purpose there is not transition effect, unfortunetaly.

Upvotes: 0

ElusiveCoder
ElusiveCoder

Reputation: 1609

Try using this, and you're done...

a {
  margin: 0 2.5%;
  transition: transform .5s;
  text-align: center;
  font-weight: 500;

  &:hover,
  &:active {
    font-weight: 600;
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
}

Upvotes: 1

Related Questions