Logo Sliding

As of here > http://demo.nicetheme.com/forum?theme_id=179315
If you put mouse on logo it slides to the right.
How could I get that :o

When I visited the skin, the logo did not move.

Did you put your mouse on the logo?
or it might not move for internet explorer

It did move when I used Opera, but did not when I used Internet Explorer.

Well yea
I want to get my logo to move like that.
But I can't figure out the right code

the logo moved.. well..u need codes for it..

Look into jQuery animate() function.

Code:


$(logo id).mouseover(function() {
 $(this).animate() {
 the stuff you want it to do
 }
});


lol it's css not script

I'd love to see you do that with CSS...

CSS can move things on mouseOver, but it can't animate things.

http://w3schools.com/cssref/css3_pr_transition.asp

That's how the logo hover was done on that theme.

It can, take a look at my example:

Code:

#logo {
    -moz-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    background-position: left center;
    background-repeat: no-repeat;
    height: 100px;
    position: relative;
    text-align: left;
    top: 15px;
}
#logo:hover {
    -moz-transform: translate(60px);
}

I take it back! I do apologise.

man i need to look into more CSS3. I'm living in the past.

The codes didn't make my logo slide

Here you go:

Code:


#pun-logo {
    -moz-transition-duration: 1s;
    -moz-transition-property: -moz-transform;}
#pun-logo:hover {
    -moz-transform: translate(60px);
}

Thanks Johnny it worked.