X Course Advisor FREE Course Advisor
Watch Tutorials
Have Some Fun With CSS3 Transitions

It seems that browser vendors are really pushing new CSS3 features through at a pretty fast pace despite CSS2.1 only just having been finalised.

Even though CSS3 is years away from being finished most modern browsers have been implementing it for a while. In this quick tip I’ll show you a neat little roll-over effect using CSS3 Transitions. 

Step 1

I have some very simple markup here. Just an unordered list with some links in.:

I’ve put the link tags inside some span tags purely for backwards compatibility. I know it’s not strictly semantic but if you want this to work in IE6 (Shakes fist!!!) this is how you’ll need to mark it up as IE6 (Shakes fist!!!) will not understand :hover on anything other than link tags. For IE7 you’ll need to make sure to declare a doctype for :hover to work on non-link elements. Pathetic, I know!

I’ve applied some simple styling to make a horizontal navigation bar. 

This is the result:

I’ve applied display: inline; to the list tags to prevent some layout issues in IE6 (Shakes fist!!!).

Step 2

Now I’m going to apply a background image to my link tags:

This is the result:

I know this looks a bit weird but bear with me. The image is positioned using the background shorthand rule.

background: ;

Step 3 

Now I can style the span tags.

This is the result.

You’ll notice that the link tags' background image is now hidden by the background color of the span tag which is sitting on top of it. The span tag is also 20px smaller in height than the link tag. This is important!

Step 4

Now I’ll apply the :hover rule to my link tag. This will cause the link tags background image to move 10px downwards, essentially revealing it when you mouse over the link.

This is the result.

At this point you're essentially in fallback mode. The current markup should work in every known browser. Any code I add from now on will be CSS3 and support will vary from browser to browser.

Step 5

Now I’ll add my CSS3 Transition rule to the link tags.

Here’s how it works. 


all (apply to all CSS properties of this element)

.3s (the time for the transition)

linear (the timing curve of the transition)

Now any change in the properties of the link tags (on ‘hover’) will transition smoothly to its new value. Namely the background position and the text color.

You’ll notice also that there are quite a few vendor prefixes for CSS Transitions. Each browser currently implements this effect in different ways so we need to target as many as we can. 

-moz- = Mozilla Firefox

-webkit- =Safari, Chrome

-o- = Opera

Once this is finalized it will become simply ‘transition’.

Step 6

Finally I’ll add some quick rounded corners.

This is the result:


  • This should work well in Firefox, Safari and Chrome. 
  • Opera does support CSS3 Transitions but not yet on background-position. 
  • Hopefully we’ll see this in Internet Explorer in about the year 3038. But don’t bet on it!!


This concept can be applied to loads of roll-over effects. In the download below you’ll find some more examples including this effect where when you roll over an album it shows you the format CD, Vinyl with a nice transition.


Play about and have some fun & check out this CSS Floating Layouts Title.

Toby Pitman

Toby Pitman | Articles by this author

For the past 20 years Toby has worked as a professional guitarist, programmer and producer. Clients include Sir Paul McCartney, George Michael, Shirley Bassey, Yusuf Islam, Giles Martin as well as the London 2012 Olympic Ceremonies. He has also worked extensively in TV, Advertising and Film. As well as composing himself he has also worked alongside many composers like David Arnold, Clint Mansell and Simon Franglen on many major film releases. An expert in synthesis and sound design Toby has also lectured for Apple on their Logic Pro music software which he has used since its days on the Atari. He has also worked as an educator for the International Guitar Foundation and the Brighton Institute of Modern Music teaching guitar. In his spare time (of which there is very little) he moonlights as a motion graphics artist specialising in Cinema 4D and After Effects.


You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.