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.
#93: CSS3 Slideup Boxes
Chris Coyier
on
(Updated on )
Nice ! There’s also : http://tinyurl.com/2vvlmbv
Sure – if you want to pay for it
Really nice vid. Simply explained for the masses. Thanks!
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.
Good work! I look forvard to see more intresting tricks with HTML5 and CSS3!
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 ;)
For the doc spaces Chris has put it here – kinda hard to find in Code Snippets > HTML – for us all.
Really nice tutorial Chris! Just a shame Firefox 3 doesn’t support it yet but glad to see 4 does. Thanks a lot!
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.
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!
I can’t understand your example slideup boxes. Please send me some more examples link about slideup boxes css3.
Nice that the demo works in opera to, maybe time to update the boxes on the front-page as well then.
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,
Add: Width + Float, like so:
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.
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)
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?
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
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…
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.
Chris –
The video stops at 6:21 into it. Thought you might want to know. Not sure what happened.
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….
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
Great tutorial as always, Chris. :)
I just wanted to mention to those worried about the same functionality not being available in FFOX 3/IE, etc. Not all experiences HAVE to be the same in every browser. These little boxes actually just make the design sexier. But you could use something like Modernizr to detect support and, if not found, just let the boxes already be showing their contents. The people that get the box’s content right off the bat don’t know they missed a transition. The person with the better browser sees the cool boxes. No one’s any the wiser (when do people look at your site on more than one browser, right?)…
Just a thought…
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.
Amazing.
Thanks for sharing.
I will use it in my websites and surely I will add some credits to you.
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.
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; }
}
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!
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.
Hey Chris,
Once again, thanks for your videos & tutorials. You totally inspire me.
John
Hi,
how can I change first images. I want to use different images on mouseout section.
Thanks in advance.
Kaan
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.
It’s a shame it doesn’t transition in IE10..
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.