Check out [this site](http://noodoll.com/ “http://noodoll.com/”), Please.
I love how the little creature slides to the left and up on the side navigation.
I managed to hide the span and once the image is hovered the span is then displayed, BUT I am not sure how to get it to slide up or to the left instead of just quickly appearing…
Make any type of sense? Hope to read a few solutions!
You need to have the same properties defined in both “before transition” and “after transition” states so there is something to base the animation on. Here are the quick fixes to get you started with something that works:
margin: 0 auto; only works for block elements that are static or relative and have a width. Now price element doesn’t have anything to “auto” to as it isn’t in regular page flow – element isn’t in page flow if you float an element or if it is absolutely positioned.
The trick you need to do is to give the elements a left and top of 50% and then use negative top margin to move the price element up by half of height + padding (= 70px) and do the same kind of changes to the left margin. Then also change the :hover state so that it is based on margin instead of left and top.