Grow your CSS skills. Land your dream job.

i cant workout how to make my logo rotate on rollover …help please?!

  • # May 12, 2013 at 3:00 am

    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](http://blog.vivekv.com/demo/rotate_image/ “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](http://dmstremel.com “here”):

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

    any help would be greatly appreciated

    # May 12, 2013 at 7:38 am

    Hi @painefw!

    Just add the “rotate” class to your logo, and include the above css in your “style.css” file.

    I only shortened the img src to make it easier to see

    # May 12, 2013 at 11:47 am

    Im still not having much luck getting this to work. So as suggested, i have placed the code that i found in my stylesheet along with the piece of code that you have so kindly given me ( pbviously changing the img src to that of the image…. but nothing is happening?? what am i doing wrong @mottie??

    # May 12, 2013 at 11:49 am

    I hope im not just being silly!

    # May 12, 2013 at 11:57 am

    Hi @painefw!

    Actually it looks like the HTML I shared above was put into the style.css file. The only thing that should go into the `.css` file is css. I meant to add this to your css:

    .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);
    }

    Then modify your HTML (it already exists on the page) by adding the `class=”rotate”` to the `img`

    # May 12, 2013 at 12:18 pm

    Rotating logo? Nooooooooooooooooooooooooooo! It’s 1999 again! ;o)

    # May 12, 2013 at 12:27 pm

    LOL @deeve007 Even [jQuery](http://jquery.com/) is doing it – hover over the “cross browser” icon.

    # May 12, 2013 at 1:44 pm

    okay so i have placed the css code in the stylesheet, the other piece of code(html) needs to go into one of the php files?

    I’m not sure if this theme is just bugging out because ive made this code work before with a previous theme. Ive tried putting that snippet of code inside every php but to no avail. Index, sidebar, header…. none of them seem to work.

    # May 12, 2013 at 1:50 pm

    under theme-options.php there is talk of logo, however this seems to be pretty much the only time such a phrase is used in any of this themes code: it goes as follows

    Logo url

    If left blank, theme will not display logo.

    # May 12, 2013 at 2:03 pm

    now ive made my site go blank, this is an actual nightmare!

    # May 12, 2013 at 3:47 pm

    DOH, sorry… I can’t tell what your php looks like, but this is where the logo is located. It appears you have two divs with an id of logo… this is the one that needs the class name added:

    # May 12, 2013 at 7:42 pm

    after a lot of messing around, i had a good think about it and it just all of a sudden made a billion times more sense to me with regards to what i was doing wrong. The piece of code your referring to on my end was basically a condtional ‘if’ ‘else’ statement that i was trying to add to instead of just getting rid of it all completely. Got there in the end. Thank you very much for you help and more importantly putting up with my incontinence!

    # May 12, 2013 at 10:48 pm

    You’re welcome!

    and incontinence? o.O… tmi buddy, tmi ;)

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".