Docs

[Headlines34]

Hello,

I’m trying to animation on hover to my submit button seen here: http://www.kennettsquareautomotive.com/ks-automotive/

The CF7 snippet for the image is: <input type=”image” class=”mc-spin” src=”http://www.kennettsquareautomotive.com/wp-content/uploads/2017/01/mc-tire-street.png&#8221; height=”100″>

The css:
.mc-spin: hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);}

When I hover over the image it moves slightly, but does not spin. Can you help?

Thanks,
Chuck

[Friech]

Hi Chuck,

Thanks for writing in! The hover effect does not happen slowly, it goes 0 – 360deg so we’ll never notice the wheel spin. Maybe you can do 180deg instead.

.mc-spin:hover {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

Thanks.

[Headlines34]

Got it to work with this code and it looks awesome:

.mc-spin {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;}
.mc-spin:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);}

Thanks!

[Christopher]

You’re welcome.

[Author]

Posts