Over at Happy Cog, we recently worked with MTV on their second Online Music Awards event. The project consisted of both a live streaming event as well as a supporting web site where users could come and vote on nominees. As a site that was designed to be exciting to use, we also wanted to make sure the experience was easy to use, while including some “surprise and delight” factors. The Vote page features an adaptive grid with hover states that were planned to reveal additional information about the categories.
The hidden information is not vital to be able to interact with the links, so we didn’t want to cover the imagery with it. We also didn’t want to exclude it, because some of us who have been watching MTV since “Video Killed the Radio Star” might need some additional context to know what the hip kids are voting on these days.
Talking it over with the design team, we figured we wanted the additional text to slide up on mouse over, so we decided to take advantage of CSS transitions to do so. I figured, no problem! We’ll toss a few different block elements within a link, since HTML5 lets us do that, and then set the height on the hidden text to 0, and then height auto that jawn on hover! Right? Not so much.
As you can see, there is no transition. Just a straight reveal. Bummer. So, I then tried animating to a height of 250px. And that works!
Unfortunately, I didn’t know the heights of all the descriptions. So that wouldn’t fly. Life’s looking up though, when I thought, how bout we try max-height instead.
So we remove the height attributes completely and set max-height to 0 initially, and then max-height to fit within the fixed dimension size of the box. As you can see, we’re in business.
For browsers that don’t support this, you can fallback to a straight reveal or rely on the primary link text to describe the link destination. CSS hover effects have gotten to be a boatload of fun.