Created a 3D can that spins around but was wondering could JS change the size from small to big?

JavaScript
1

I’m trying to do this without changing the size of the image because when I did change the size of the image, it displayed wider - making it look like a fat can than a thin can. Also, it was repeating the image again as there was more space.

Here is my work: - https://codepen.io/Rosstopherrr/pen/LoKmJa

But what I’ve been trying to do is have a mouseover function. The size of the can needs to be small but when the cursor hovers the product it will display large, so the viewer can see the product clearly.

Am I in the right track here? I’ve tried changing the height size of my div classes and, as expected, did not work. Any solutions here without changing the size of the image??

Image Dimensions -
Width: 15.61 CM
Height: 11.6 CM
Resolution 150 pixels/inches
Resulting size - 248KB

2

When hovered, you need to set transform: scale(1). Play around with the 1 value until it’s the right scale. To make it be a smooth animation, you can add transition: transform .5s to the bottle, and again play around with the .5s value (seconds) until it’s just right.