How To: Make hidden span slide up with transition duration?

[asiek]

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!

Here is my fiddle///
[http://jsfiddle.net/DCZDm/](http://jsfiddle.net/DCZDm/ “http://jsfiddle.net/DCZDm/”)
Thank You!

[Merri]

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:

ul.products li.product .price {
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
position: absolute;
color:#FFF;
width: 80px;
height: 80px;
padding: 30px;
position: absolute;
font-size: 35px;
font-weight:normal;
-webkit-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
background: #ff387a url(inc/images/trnsprnt_diag_lines.png) repeat;
text-decoration: none;
left: 300px;
top: 300px;
}

ul.products li.product:hover .price {
left: 75px;
top:60px;
}

[asiek]

^_^ @Merri Appreciate the quick response and working solution x^D
I will definitely have to bookmark this discussion!
Thank you :)

[asiek]

@Merri One last question…Do you know how I can position the price bubble in the center of the image? :x
margin: 0 auto; isn’t doing the job :/

[Merri]

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.

[asiek]

Thank you :) @merri

[Author]

Posts