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
Solution 1 :
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