CSS shine effect to appear as a circle shape and hover issue

HTML & CSS
1

Hi there,

I have the following fiddle:

I am trying to create a shine effect when the “coin” spins. I kind of have it half working, but as you can see, the shine remains behind the coin when it rotates. Also, it seems to reset after it has rotated/in the middle of being rotated. Is there a way to have the shine effect stay in the circle shape and also have a continuous/smooth effect while the coin spins and then have it ease out again as the user hovers off the coin?

I’ve tried a border-radius but that didn’t seem to work

Any ideas?

Thanks!

2

Is this any better?

I put the effect on the flip-card-front so that it spins with the circle.

I also removed the keyframe and used a transition so that it resets automatically when not hovered.

You could probably do the same process on the back face if you wanted but I didn’t have time to test :slight_smile:

Edit: Just noticed that if you don’t hover for the full turn then the sheen doesn’t return at the right time. Not sure how to address that issue yet though…

1 Like
3

That’s fantastic, thank you very much :slight_smile:

I will have a play and add it to the back of the coin.

Thanks again!

1 Like
4

This is a little better as the sheen comes back at the right time.

1 Like
5

Thank you, that is awesome :slight_smile: