Grow your CSS skills. Land your dream job.

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

Comments

  1. Jan
    Permalink to comment#

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

  2. Al
    Permalink to comment#

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

  3. Kawohi
    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. Permalink to comment#

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

  5. 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. 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. Good thing I read the comment directly above. Was about to bitch at you.

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

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

  9. 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!

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

  11. tobias
    Permalink to comment#

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

  12. Ed
    Permalink to comment#

    Great little guide

  13. 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,

  14. Permalink to comment#

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

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

    • 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)

  15. Polo
    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?

  16. Huntelaar
    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

  17. Loren
    Permalink to comment#

    As us usual awesome and cool effect. Thanks Chris!

  18. 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…

  19. dinkan
    Permalink to comment#

    that was an awesome trick.. thanks :-)

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

    Cheers.

  21. Permalink to comment#

    Chris –

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

  22. Derrick
    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….

  23. leong
    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.
    Leong

  24. you are my god Chris

  25. franics
    Permalink to comment#

    amazing! as always.. I’ve learned a lot on this site..
    thanks Chris…

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

  27. Martin
    Permalink to comment#

    Great job! Tks for this tuto, from Argentine.

  28. Prodyot
    Permalink to comment#

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

  29. Jérémy
    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.

  30. nadeem ashour
    Permalink to comment#

    it dosen’t works in google chorme

  31. 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,

    Jonathan

    • 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 ;)

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

  32. 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!

  33. Jawad
    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.

  34. Really helpful video! Loads of unintentional tips thrown in as well :)

  35. Permalink to comment#

    Hey Chris,

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

    John

  36. Kaan Ashan
    Permalink to comment#

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

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

  38. Graham
    Permalink to comment#

    Thank you!!!

  39. Mark
    Permalink to comment#

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

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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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