The CSS3 Carousel Experiment

When I first read about CSS Animation, I thought that they shouldn’t be messing with the separation of logic and style. In my mind, it should be clear that logic (animation, rotation, even the alternating row styles) should be in javascript, all the styles should be in CSS, and the document structure in HTML.

One time, while working on our internal project, I thought I’d try a little -webkit-transition-duration because I wanted the color of the links to gradually change to something else on hover. But when I hovered on our main navigation that was using a sprite image, the background scrolled from one background position to the next every time we hover on it because of the delay! It was really amusing.

CSS3 Carousel

I experimented a little bit with transition and descendant selectors, but apparently, p ~ p doesn’t work with :hover or :active or :focus very well (browser notes below) and came up with this CSS3 carousel experiment.

To do this, you should have the following markup:

<div class="carousel">
  <a href="#" class="first-image">1</a>
  <a href="#" class="second-image">2</a>
  <a href="#" class="third-image">3</a>
  <a href="#" class="fourth-image">4</a>
  <img src="main-background.jpg" alt="" />

It’s really rather plain, it’s because we’ll be choosing the image using CSS’ child selectors to move the image and it won’t work if we enclose the links in a div or list.

And this CSS:

  img { -webkit-transition: all 5s; -o-transition: all 5s; }
  .carousel { width: 500px; height: 372px; overflow: hidden; }
  a.first-image:hover ~ img { margin-left: 0; }
  a.second-image:hover ~ img { margin-left: -500px; }
  a.third-image:hover ~ img { margin-left: -1000px; }
  a.fourth-image:hover + img { margin-left: -1500px; }

New child selectors: the ~ symbol is used to select all fellow child elements, in this case, an image. If you add another image, it will be selected by this, too. The + sign on the other hand is to select a descendant that directly follows it. It’s really exciting, go nuts! 1

Some people would obviously rather use a div and apply the image as background, all you have to do is replace img with div or the class you assigned to it.

Browser (in)compatibilities:

  • For some reason, webkit-based browsers doesn’t interpret this very well, the second and third link can’t be triggered unless you hover on the fourth link first.
  • Firefox interprets the child selectors perfectly but not transition because it will only be implemented in Firefox 4.
  • The experiment works perfectly in Opera 10.6 and it gives me a warm fuzzy feeling inside. :D

Further Reading: