The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

  • # March 3, 2013 at 3:09 am

    Check out [this site]( “”), 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///
    []( “”)
    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 {
    position: absolute;
    width: 80px;
    height: 80px;
    padding: 30px;
    position: absolute;
    font-size: 35px;
    -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;

    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed