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: