Where css goes to die.
li{
aspect-ratio: 1;
}
/*above can replace below*/
li:after {
display: block;
padding-bottom: 100%;
content: "";
}
<img alt="words describing the image" loading="lazy" src="images/imageone.png">
loading="lazy
only loads the image content if the image in the element is visible to the user (in the viewport).
When using translateY/X and wanting a smooth transition, use the 'transform' property.