Using CSS3 to Create a Beautiful Sidebar Transition

Last week I was casually browsing through Tumblr and came across a design with an awesome sidebar effect. I took a look at the coding, as you do, and was delighted that it was done entirely through CSS3.

Now in normal everyday business I don’t get tons of opportunities to use effects like these, but this was just so cool I decided to make up a jsFiddle to try it out.

Here’s what we’ll be creating:

Want to check out the inspiration? destielhasdestroyedme.tumblr.com

The Basic Setup

First, I had to figure out the basic setup of the Div. It was set with a FIXED position with a set WIDTH, a BACKGROUND IMAGE, and BORDERS. I named the Div “background”. I hadn’t used the CSS3 TRANSFORM property, but it’s fairly easy. I just used the effect they used on the original (rotating 5 degrees).

They also definitely used the TRANSITION property to create the hover effect, so I added that in.

Next I set the LEFT and TOP properties. At first glance, I put TOP at 0%, but then I realized, with it rotated 5 degrees, it wouldn’t cover the whole page. So I changed the TOP to -10%, so it starts 10% off the page. Of course, once you start the 100% HEIGHT Div to start 10% off the page, you’ll need to change the HEIGHT so that it still covers the whole page, hence the 120% HEIGHT (10% off the top, 10% off the bottom).

So the full CSS for the Background Div:

Note the image I used was from KaliLaine Photography, who sells that gorgeous coffee image as a photography print on Etsy.

The Hover Effect

The basic hover effect wasn’t difficult at all to achieve, now that we’ve got it all set up. Upon hovering over the Background Div, the WIDTH was set to 60%. I also changed the LEFT property to -10% so that it would move the entire Div left.

Essentially, then, the Div was increasing width to 60%, with that 30% increase moving it left 20% (it starts at 10% from the left, and ends at -10%), and filling up 10% more space to the right.

Applying Hover Effects to Child Divs

Probably one of the most useful things I learned in this exercise was how to make a child Div do something when hovering over the parent Div. In this example, both the Sidebar Div and the Title Div do something when you hover over the Background Div. The way to achieve this is surprisingly easy.

Instead of doing #background #sidebar:hover, reference it this way: #background:hover #sidebar.

In the first one, we’re applying the effect ONLY when you hover over the sidebar Div (the tiny grey bar that moves from left to right) – not exactly the effect we want. In the second one, we’re apply the effect to the Sidebar Div when hovering over the Background Div.

However, just because the hover makes the child div switch, doesn’t mean the TRANSITION property gets applied to it. Make sure each of the child Divs (#sidebar and #title) have the TRANSITION property set for them.

A Little Bit of Math

Finally, in case you’re wondering how I used percentages but kept the widths the same, it just takes a little bit of math.

On the Sidebar, I started it with a width of 5%. But as the parent Div increases, from 30% to 60%, that 5% is also going to increase pixel-wise. So, to keep the same pixel width, in Line 28 in the CSS (jsFiddle), the width decreases to 2.5%. The parent Div increased x2, so to keep the same width of the Sidebar, we’ll need to divide the width by 2. That’s it!

We do the same math on the Title Div. It starts at 80% width and goes to 40% width in Line 44 in the CSS.

Summary

I was actually really surprised that this effect was so easy to replicate. It took me maybe 15 minutes to completely create the jsFiddle. A couple of years ago you would have had to create this using jQuery, or, a few years earlier, create it in Flash (yikes!). CSS has come a long way. Now, maybe, we can get around to making those HTML Select fields editable by CSS too.

Ah, well, a girl can dream.