Question

I would like to create a hover over my navbar links like the ones in this example
http://livedemo00.template-help.com/wt_39513/index.html

I don’t necessarily want the answer but more of what resources or guides I need to look out to understand what is happening. From what I read so far CSS3 has transitions which would control this function?

I would like to learn how it works, especially with the example i want to achieve.

any help appreciated

Answer 1

Very interesting example, Richlewis. On the page you shown us the transition is used on each li element in the menu. In their style sheet you can find these lines:

-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;

This basically means “use transitions on all properties of this li element”. Though, in this example, the most important is the background-position property. It is used to scroll the background when you hover over this element.

And the background pattern (which can be found here: http://livedemo00.template-help.com/wt_39513/images/nav_li.png) is just a 1px wide green image with two transparent gaps.

If you’d like to read more about transitions in CSS3, I’ve found a great article here: http://www.alistapart.com/articles/understanding-css3-transitions/.

Hope this helps. 🙂