Solution 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

Problem :

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%);
}

Comments

Comment posted by s0xzwasd

Hi, can you show code snippet or sandbox (jsfiddle, codepen)?

Comment posted by HoneyPoop

Ive been working with an HTML file, but I could send you a video of it if thats possible

Comment posted by Paulie_D

move the

Comment posted by HoneyPoop

Yes, worked, thanks!

Comment posted by HoneyPoop

If I just do transform:scale(1.2);, the element will move left and downward when I hover over it.

Comment posted by HoneyPoop

So adding the transform translate does help, but it still looks a bit weird.

Comment posted by VR7

if possible upload the full code and remove translate command from .skyimage also

Comment posted by HoneyPoop

the full code is over 300 lines

By

Leave a Reply

Your email address will not be published. Required fields are marked *