#93: CSS3 Slideup Boxes

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Learn Development at Frontend Masters

Download Video
(Only MVP Supporters can download original high-quality recordings for offline viewing.)

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.