CSS Rollovers – Just Add Water


Isn’t it great when someone not only comes up with an nice solution to a problem (rollovers in this case), but then takes the extra effort to make it easy for you to understand and implement yourself?

Recently Simon Collison spent some time thinking about CSS images rollovers and distilled his conclusions and code into a well thought-out tutorial.

Enough for any man, you may be tempted to think, but no, Simon has gone the extra yard to build a slickly constructed auto code generator – a fine piece of work in it’s own right.

Cheers, Simon.

Free Chapter! HTML5 & CSS3 for the Real World

Get a free chapter of SitePoint's new book, the second edition of our popular HTML5 & CSS3 for the Real World and receive updates on our latest offers.

  • http://www.lowter.com charmedlover

    This is nice! I’ll be using this in future layouts.

  • constans

    Great! No more javascripts for rollover links.

  • http://www.benwarren.co.uk benji
  • bcyde

    Great links including that one from benji. Eye opening stuff.

  • http://www.kenzey.com Farooqaaa

    Very Good :)

  • Dorsey

    Please, when responding with a link, give us a little idea of what we can expect to find (a synopsis) and the link’s relevance to the discussion. Just writing “check out ” is very annoying.

  • http://www.thepariahpress.com hawkshango

    Very interesting… Never thought about using graphics within CSS for rollover effects. It could be done, but never thought it could actually be done. Just might add it to my arsenal for web design.

  • scattermachine

    This reminds me of something I read in Rachel’s CSS book. She was shifting pictures of peppers up and down. I think she used 3 states: red yellow and green.

  • http://www.benwarren.co.uk benji

    don’t be ridiculous dorsey. Obviously it’s related to the topic or I wouldn’t have posted it. There’s no point me writing a monologue on it, just follow the link.