Making Links Magical Again with CSS: re:build 2012

Last week I had the pleasure of speaking at re:build 2012 in Indianapolis. I gave a talk on the nifty things people are doing with hovers these days. Slides are here if you’re into that: http://www.slideshare.net/JennLukas/making-links-magical-again-with-css

I thought I’d share with you one example that prompted me to utilize hovers.

One day, I was hanging around watching the movie Runaway which stars Tom Selleck (our good guy), Gene Simmons (our bad guy), and killer robots (more bad guys).

And I said to my friend, sometimes I have a hard time telling Tom Selleck and Burt Reynolds apart. I was mocked for this. Then I went to the Googs. And it turns out, I’m not the only one who thought so. This person made a quiz to see if you could tell them apart: http://kisrael.com/2009/07/03/

I decided that form submissions are for chumps, so I made a version utilizing hovers instead: http://jennlukas.com/css-summit/burt-vs-tom/

I invite you to bask in the mustache knowledge and then take a look under the hood.

The HTML:

<div class="tom"><span><img src="i/1.jpeg" alt="1" width="" height="" /></span> <strong>It's Tom!!</strong></div>
<div class="burt"><span><img src="i/3.jpeg" alt="1" width="" height="" /></span> <strong>Burt here!!</strong></div>
<div class="tom"><span><img src="i/4.jpeg" alt="1" width="" height="" /></span> <strong>Tom strikes again!!</strong></div>
<div class="burt"><span><img src="i/5.jpeg" alt="1" width="" height="" /></span> <strong>Burt is the word!!</strong></div>

We’ll use the burt and tom classes to tell the image which side to go to. Here’s the CSS for that:

span { position: absolute; display: block; padding: 10px 0 5px; width: 100px; text-align: center; -webkit-transition: all 0.35s ease-in-out 0.5s; }

.tom span { left: 330px; }
.burt span { right: 330px; }
.tom:hover span { left: 0; }
.burt:hover span { right: 0; }

div strong { display: block; padding: 15px 0 0 110px; opacity: 0; -webkit-transition: opacity 0.35s ease-in-out 0.6s;  }
div.burt strong { padding: 15px 110px 0 0; text-align: right; }

div:hover > strong { opacity: 1; }

We’ll also reveal an extra message on hover that says who is who by changing the opacity of that message span from 0 to 1. We do that for users that have scrolled down the page and can’t see the header holding the names. We could also use fixed positioning to solve that but then we would miss an opportunity for cleverness!

The other thing that is neat for the content here is the delay on the transition. That way, if users want to take .6 seconds to guess if the image is Burt or Tom, they can!