#93: CSS3 Slideup Boxes

Follow along as we use a few very simple CSS3 transitions to create a "slideup" box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized box of information jockeys its way into place. This is supported in modern version of Gecko, WebKit, and Opera browsers. No Internet Explorer support yet, but no fallback is needed, the link works and the information shows as expected.


  1. User Avatar
    Permalink to comment#

    Nice ! There’s also : http://tinyurl.com/2vvlmbv

  2. User Avatar
    Permalink to comment#

    Really nice vid. Simply explained for the masses. Thanks!

  3. User Avatar
    Permalink to comment#

    This is what css-tricks is all about! I wonder if someone can make a jQuery fallback so this can work in Firefox and IE.. maybe.

    Awesome video Chris.

  4. User Avatar
    Permalink to comment#

    Good work! I look forvard to see more intresting tricks with HTML5 and CSS3!

  5. User Avatar
    Permalink to comment#

    Oh my god i don’t know we can do transformation with CSS!

    What do you use to create space between applications in your dock? And what is the icon looks like internet explorer near firefox icon?

    Great vid thank you ;)

  6. User Avatar
    Ed Baxter
    Permalink to comment#

    Really nice tutorial Chris! Just a shame Firefox 3 doesn’t support it yet but glad to see 4 does. Thanks a lot!

  7. User Avatar
    Permalink to comment#

    I’m assuming this does nothing though in a touchscreen right? Touch screens have totally ruined hover and mouseover events for me.

    • User Avatar
      Andrew Turner
      Permalink to comment#

      Not that I’ve seen.

      Projects such as JQ Touch and JQuery mobile are bringing the accessibility of touch events to everyday front end developers through javascript and standard conventions.

      Pretty cool, As i look forward to seeing where touch-based interactive websites go given the new breed of ‘tools’ in a dev’s shed.

      Great video Chris, Boxes look great, Looking forward to implementing them into my next project.

  8. User Avatar
    Permalink to comment#

    It’s a sad day when Firefox doesn’t support something. :) Looking forward to Firefox 4 though – also thanks for the unintentional tip re MultiFirefox!

  9. User Avatar
    Nafees Ahmed
    Permalink to comment#

    I can’t understand your example slideup boxes. Please send me some more examples link about slideup boxes css3.

  10. User Avatar
    Permalink to comment#

    Nice that the demo works in opera to, maybe time to update the boxes on the front-page as well then.

  11. User Avatar
    (Author Requested Removal of Name)
    Permalink to comment#

    Really cool!

    I am trying to make this work with the boxes running horizontal, I have had no luck?

    I’m using the same code but tweaked the CSS, I just can’t figure out out to make the boxes go next to each other rather than below.

    Any help would be greatly appreciated! :)

    BTW, Yes I am new to Web Dev,

    • User Avatar

      Add: Width + Float, like so:

      .slide-up-boxes a { 
        display: block;
        width: 300px; float: left;
  12. User Avatar
    Permalink to comment#

    I geuss this can be done with jquery also and it would be ok for all browsers, right??

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Sure. You’d have to rewrite it to use jQuery’s .animate() to do stuff instead, but it’s certainly possible and yes, more cross-browser compatible.

    • User Avatar
      Alan K
      Permalink to comment#

      Yes, and jQuery has more options for event handlers.

      But how about performance concern? jQuery has more commands to be executed, no? (and more lines)

  13. User Avatar
    Permalink to comment#

    Is it possible to extend a hover effect using css3 any further? Such as taking an image sprite, then first dropping the opacity on hover, changing the margin-top to a negative value and pulling the opacity back up again —> fade-out-and-in image swap. Could that work with just css?

  14. User Avatar
    Permalink to comment#

    Chris could you tell me what kind of software do you use to create your screen cast? Could you give me a tip on that please? I am lost on the screen cast world. THANKS Huntelaar

  15. User Avatar
    Permalink to comment#

    Thanks Chris!
    Wanted to know how you did that since the first moment I laid eyes on the (then) new design…
    BTW – I really like the (now) new design…
    Thanks a lot, and please don’t give up on video casts! It is what brought me to your site…

  16. User Avatar
    Permalink to comment#

    i’m just introducing myself into CSS3 and i am all excited of the possibility’s. Jquerry has always treated me well, but have never truly followed it as its so open sourced with huge variations. Thank you for the tutorial, it was easy to follow and works lovely.


  17. User Avatar
    Permalink to comment#

    Chris –

    The video stops at 6:21 into it. Thought you might want to know. Not sure what happened.

  18. User Avatar
    Permalink to comment#

    Just wanted to mention that if you duplicate the code for the hover on the H5 element and change it to focus this becomes keyboard compatible also.. Just my two cents….

  19. User Avatar
    Permalink to comment#

    Hi Chris,

    very sweet and clean transitions.
    i have a little problem to put multiples box in the same row, do you have any idea how to make this work?

    Appreciated your assistance.

  20. User Avatar
    Jerry Lee
    Permalink to comment#

    Well, if anyone is better at this than me, in Firefox I tried this:
    -moz-transition:margin-top 0.2s linear;

    and it kinda started to work. Perhaps this can help someone better at it than me get started.

  21. User Avatar
    Permalink to comment#

    Thanks for sharing.
    I will use it in my websites and surely I will add some credits to you.

  22. User Avatar
    Permalink to comment#

    Hi! This trick is really amazing but I search for hours the way to display this menu in “horizontal” mode. No question, I can’t do it, someone could help me please ? :)

    Jérémy from France.

  23. User Avatar
    Jonathan Mitchell
    Permalink to comment#

    Hey Chris ! Very cool stuff and I am impressed as usual with your innovation. I actually decided to use this effect on my home page @ jonathanmitchell.ca and unsurprisingly it works very well in modern browsers (even IE9) but it does not degrade gracefully for older IE browsers (I think I have IE 8 and it performs poorly). I watched your tutorial and you mentioned it *should* work in older IE but it didnt and in fact it behaves in quite an odd way and ive been trying to recode it and even look at JS for support but nothing seems to work.

    My question is: Do you have an update on this effect for IE support? Or is there a JQuery plugin ? I will check out Modernizer and update everyone on here on its outcome. Thanks a lot and all the best,


    • User Avatar
      Jonathan Mitchell
      Permalink to comment#

      In fact, even if the effect in older IE browsers was to replace the with the GIF image then that would be fine … cant expect miracles with IE ;)

    • User Avatar
      Jonathan Mitchell
      Permalink to comment#

      Actually I figured it out! I just did a conditional CSS style to target IE 8 and below.
      Here it is:

      section.slide-up-boxes:hover {cursor: pointer; }
      section.slide-up-boxes a:hover h5 {display: none;}
      section.slide-up-boxes a div{display: none;}
      section.slide-up-boxes a.web:hover{ background: #999 url(web.gif) no-repeat; background-position: 0 -10px; }
      section.slide-up-boxes a.photos:hover{ background: #999 url(photos.gif) no-repeat; background-position: 0 -10px; }
      section.slide-up-boxes a.graphicdesign:hover{ background: #999 url(graphicdesign.gif) no-repeat; background-position: 0 -10px; }
      section.slide-up-boxes a.motion:hover{ background: #999 url(motion.gif) no-repeat; background-position: 0 -10px; }
      section.slide-up-boxes a.interactive:hover{ background: #999 url(interactive.gif) no-repeat; background-position: 0 -10px; }
      section.slide-up-boxes a.friends:hover{ background: #999 url(friends.gif) no-repeat; background-position: 0 -10px; }
      section.slide-up-boxes a.resume:hover{ background: #999 url(resume.gif) no-repeat; background-position: 0 -10px; }

  24. User Avatar
    Permalink to comment#

    Nice stuff, I guess “webdesignerdepot.com” uses a similar effect in their redesigned footer. Haven’t dug into their code yet so it’s probably done differently (or with jquery) but I like the concept of this alot. Thank you for another clear and solid screencast!

  25. User Avatar
    Permalink to comment#

    Can you please fix the download video which freezes at about 03:25. Have some issues and so can’t view the youtube one and downloading the video gives a corrupted file even with the latest codecs in VLC Media player and others. Only this file has errors while others work just fine.

  26. User Avatar
    Permalink to comment#

    Hey Chris,

    Once again, thanks for your videos & tutorials. You totally inspire me.


  27. User Avatar
    Kaan Ashan
    Permalink to comment#

    how can I change first images. I want to use different images on mouseout section.
    Thanks in advance.

  28. User Avatar

    Just saw the tutorial and find it really helpful. I know when the video was done, IE9 didn’t support transition and transform but now IE10 does support those CSS3 transition and transform.

  29. User Avatar
    Permalink to comment#

    It’s a shame it doesn’t transition in IE10..

  30. User Avatar
    Carlton Stith
    Permalink to comment#

    OMG Chris. You are the man! Been searching high and low for a CSS transitions tut like this but I should have known to stop here first. I’ve learned so much by watching you. Thanks a million dude.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.