Awesome Tweak Tip: Animate Your Network Logo With Pure CSS-No Gifs

[JFarrow]

Ok, so this this tweak may not be the most simple one to execute but it is worth it once you've properly included the CSS into your Advanced (appearance) section.  This trick is using CSS3 transformation property to animate your logo on a 3D plane, making it change when you hover over it.

You can see it live on Land Surveyors United.

What does it accomplish: Making your network unique so that it burns a hole into the brains of your visitors.  They will never forget your network.

Step 1:  Find this in your appearance>>advanced section:

                                               #xg_masthead p#xg_sitename {

Step 2: Now duplicate that entire section directly under it, but add the hover state to the top line like so:                                          #xg_masthead p#xg_sitename:hover {

The CSS I used:

#xg_masthead p#xg_sitename:hover {

  font-size:44px;

  font-weight:bold;

  padding: 30px 0 0 9px;

  line-height:1em;

-moz-transform: scale(1.0) rotate(360deg) translate(1px, 1px) skew(5deg, -5deg);

-webkit-transform: scale(1.0) rotate(360deg) translate(1px, 1px) skew(5deg, -5deg);

transform: scale(1.0) rotate(360deg) translate(1px, 1px) skew(5deg, -5deg);

}

You can see it live on Land Surveyors United.

LSU Logo Before Hovering

LSU Logo After Hovering

The transformation possibilities are endless with what you can do with CSS3. For best Practices, i've found that a logo that is either square or round works best, as logos which span the entire network header tend to look stupid on hover state.

I have to thank Neighbor Design for this tip.

What do you think?

[JFarrow]

guess this was a little before its time

[Armani Rouse]

actually im gonna give this whirl later on tonight!

[JFarrow]

cool man..

[Armani Rouse]

I had trouble implementing this. Here's what I did

1) I found this line in my advanced css section: #xg_masthead p#xg_sitename { and pasted the line your wrote with the hover action included right beneath that with this: 

#xg_masthead p#xg_sitename:hover {

  font-size:44px;

  font-weight:bold;

  padding: 30px 0 0 9px;

  line-height:1em;

-moz-transform: scale(1.0) rotate(360deg) translate(1px, 1px) skew(5deg, -5deg);

-webkit-transform: scale(1.0) rotate(360deg) translate(1px, 1px) skew(5deg, -5deg);

transform: scale(1.0) rotate(360deg) translate(1px, 1px) skew(5deg, -5deg);

} 

underneath it. Nothing happened on hover? Am I doing something wrong here?