Rotate image on mouse hover, only in one direction

Community resources General
1

Hi All, I am new to Webflow and have a fairly simple question (I Think)…

I would like to have a rotation on an image when the mouse hovers over it, but only to have it rotate in one direction. For instance, the image in upright, then the mouse moves over it, and the image rotates 10 degrees to the right, then when the mouse moves away, the image rotates back to its original state.

Everything I seeing has my image rotating based off where my mouse it at on the image. I just want the image to move once when the mouse hovers over it. Looking forward to your help!

Ethan

2

Hi @ethanhoeft, thanks a lot for your post and welcome to the community.

I hope I understand your question, you wish to have a hover effect on an image and rotate the image once 10 degrees to the right and on mouse hover out, the image stays in the rotated position?

Here is a video that might help:

I hope this helps.

.cyberdave

3

Hi Dave,

Thank you for the quick reply and the video!! That has been very helpful. The first part is correct. But after the mouse moves off of the image I’d like it to go back to it’s original place. What is the next step to do that? I know I am close.

Thanks,

Ethan

4

Hi @ethanhoeft,

Thanks for your reply, to restore the original rotation position, add a hover out timed animation step, see below video:

I hope this helps :slight_smile:

.cd

5

Hi CyberDave,

Thank You So Much! That is it and I was able to create that for my website successfully!

I have another question that might be a bit more complex.

I am looking to have my companies logo flip through several different fonts when you open the website, or possibly when you hover over the logo.

For instance, the logo words are in “Times New Romans” and then when you hover over the logo it rotates in a circular motion forwards on the Z-axis almost like a cube with 4 sites and each side has a different font, if that makes sense.

You’d have the fonts below all rotating together like a slot machine wheel.