How to properly scale div with text on mouse hover?

Question

I want to be able to click on a <div> (with some text in it) and be able to scale it properly. I scale the <div> using transform: scale(<x>).

The problem with the below code is that the scaling pushes the <div> "forward" and sort of spazzes out on hovering. I effect I would like is that it pops-out, such that, it stays in the middle, but, it expands its width and height.

Example (notice the font size increases):

Sample code with the problem:

div {
  position: absolute;
  width: 300px;
  height: 150px;
  border: 1px black solid;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

div:hover {
  transform: scale(1.5);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <div>This is a div.</div>
</body>

</html>

junvar · Accepted Answer · 2020-04-01T14:09:56.870

0

The translate should also be adjusted for the scaled version:

div {
  position: absolute;
  width: 300px;
  height: 150px;
  border: 1px black solid;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

div:hover {
  transform: translate(-50%, -50%) scale(1.5);
}

<div>This is a div.</div>

edited Apr 01 '20 at 14:09

answered Mar 31 '20 at 23:27

junvar

11,151
2
30
46

Okay, thanks, this works! I would like to know how you would know how much to translate back by? – user12055579 Mar 31 '20 at 23:28
2

@user12055579 no, you should translate THEN scale and keep your original translation (check the duplicate) – Temani Afif Mar 31 '20 at 23:29
@TemaniAfif So you just translate it back to the original? i.e. `transform: translate(-50%, -50%) scale(1.5)`? – user12055579 Mar 31 '20 at 23:30
@user12055579 yes – Temani Afif Mar 31 '20 at 23:31
updated per @TemaniAfif's suggestion. – junvar Apr 01 '20 at 14:10

How to properly scale div with text on mouse hover?

1 Answers1