Forums

painefw

Hi, So basically i would like the logo of my website to rotate on rollover. Im running a theme i recently bought on wordpress and have been struggling amending the right bits of code.

I have managed to find the code to actually make the transition

.rotate{
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;

  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;

  overflow:hidden;

  }  

.rotate:hover  
{
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
}

example

I just have no idea where i am supposed to place this code in order to create this effect. I am assuming in the stylesheet but nothing that i am trying is working. My website is live here:

if you need any more info, bits of code to further assist me do let me know.

any help would be greatly appreciated

HugoGiraudel

In your stylesheet:

  #logo {
      transition: all .8s ease-out;
  }

  #logo:hover {
      transform: rotate(360deg);
  }

Don't forger the prefixes. :)

JoshBlackwood

You got it. In your theme (Highlights) go ahead and create a file called custom.css right in the theme folder. Your theme will load it automagically in addition to the theme's existing stylesheet.

In that file, paste your CSS, with the following modifications:

#logo img{
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;

  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;

  overflow:hidden;

  }  
#logo img:hover  
{
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
}

painefw

You absolute diamonds! Works a treat, didnt think it was that easy. I always complicate solutions in my head when it comes to CSS. Cheers guys

treehouse : what would you like to learn today?

Forums

[Solved] need help getting my logo to rotate on rollover