CSS scale not scaling from center

Question

I am using scale to enlarge an element on hover, and it was working fine until I added transform:translate(-50%,-50%); . Then it started to scale the element from the bottom right, not from the center. Here is my code:

.skyimage{
  height:100px;
  width:100px;
  position:absolute;
  left:50%;
  transform:translate(-50%,-50%);
  top:150px;
  transition:.5s;
  background:transparent;
}


.skyimage:hover{
  transform:scale(1.2) translate(-50%,-50%);
}

Hi, can you show code snippet or sandbox (jsfiddle, codepen)? — s0xzwasd, May 26 '20 at 07:59
Ive been working with an HTML file, but I could send you a video of it if thats possible — HoneyPoop, May 26 '20 at 08:01
move the `scale` transform to **after** the `translate` ... order matters. — Paulie_D, May 26 '20 at 08:16

score -1 · Answer 1 · answered May 26 '20 at 08:02

-1

Meaning of transform: translate(-50%,-50%) is :-

-move me leftwards by 50% of my width, along the x-axis, and

-move me upwards by 50% of my height, along the y-axis

hence this will not zoom the image from the center, for that scale is enough

answered May 26 '20 at 08:02

VR7

112
3
16

If I just do transform:scale(1.2);, the element will move left and downward when I hover over it. – HoneyPoop May 26 '20 at 08:03
So adding the transform translate does help, but it still looks a bit weird. – HoneyPoop May 26 '20 at 08:08
if possible upload the full code and remove translate command from .skyimage also – VR7 May 26 '20 at 08:13
the full code is over 300 lines – HoneyPoop May 26 '20 at 08:14

CSS scale not scaling from center

1 Answers1