I am assuming when hovered it moves the position of the main text and moves up the position of the hidden text. Also looks like it may have a small subtle css3 skew or perspective. You will need to have the li tag overflow set to hidden. so as to not show the hidden text

Ralph, is of course right, you sample site uses .js. Which is not necessarily a bad thing when you consider how superfluous this kind of effect is.

I was working on a CSS only solution for this as well ( as that is often my weapon of choice) which gets around the fact that pseudo elements cant be animated. The trick begin, I didn't animate the pseudo element, just the span. and the pseudo element acts as the "rigid" part of the solution.

The benefit , of course, is that you don't need the duplicate span tag and degrades nicely in UA which dont support animations. The draw back, which I think is minor, is you need to put the info for the generated pseudo element somewhere ( I used the name attribute, but if you dont mind CSS3 only support, or not being strictly validated you could create your own attribute or use a HTML5 data attribute) You could also hard code it into your CSS tho that seems like a pain for upkeep.

Ralph, is of course right, you sample site uses .js. Which is not necessarily a bad thing when you consider how superfluous this kind of effect is.

I was working on a CSS only solution for this as well ( as that is often my weapon of choice) which gets around the fact that pseudo elements cant be animated. The trick begin, I didn't animate the pseudo element, just the span. and the pseudo element acts as the "rigid" part of the solution.

The benefit , of course, is that you don't need the duplicate span tag and degrades nicely in UA which dont support animations. The draw back, which I think is minor, is you need to put the info for the generated pseudo element somewhere ( I used the name attribute, but if you dont mind CSS3 only support, or not being strictly validated you could create your own attribute or use a HTML5 data attribute) You could also hard code it into your CSS tho that seems like a pain for upkeep.

hope this helps!

ralph_m said:

They use JavaScript on that menu, but it isn't necessary to do so. You could do it with CSS alone. Here's an example:

I am assuming when hovered it moves the position of the main text and moves up the position of the hidden text. Also looks like it may have a small subtle css3 skew or perspective. You will need to have the li tag overflow set to hidden. so as to not show the hidden text