Image effects

Question

Okay, i cant find the problem when i try to hover it in my css i said:
transform: scale(1.5);
You can check it which would be best and find the problem, thanks.

https://code.sololearn.com/WiF9oKRXj9o4/?ref=app

Answer 1

I see it enlarged

The enlarged square is getting out of the screen.

To solve it, add transform-origin

transform-origin: 0% 0%;

Fix:

https://code.sololearn.com/W9l8duFPYWSr/?ref=app

To learn more:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin