Grow your CSS skills. Land your dream job.

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

  • # March 3, 2013 at 3:09 am

    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!

    # March 3, 2013 at 3:29 am

    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;
    }

    # March 3, 2013 at 3:38 am

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

    # March 3, 2013 at 3:40 am

    @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 :/

    # March 3, 2013 at 3:58 am

    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.

    # March 3, 2013 at 6:43 pm

    Thank you :) @merri

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".