Pause Animation and reset position on hover

Hi community,

I have been looking for a solution to the following problem-- any help is appreciated:

I have an image that is constantly spinning, but on hover I want to replace it with another image and reset the rotation so that it is right side up on hover. In my case, I have an ice cream scoop spinning, and on hover, want to label the ice cream scoop (separate image). I have attached my read-only link-- I am looking to strike a balance between “flavor-1” div and “flavor-2” div.

Again, any and all help is appreciated!


Here is my public share link:

https://preview.webflow.com/preview/scoops-la-jolla?utm_medium=preview_link&utm_source=designer&utm_content=scoops-la-jolla&preview=76fc1169a353f68648094fb631ca5148&workflow=preview