Grow your CSS skills. Land your dream job.

Nine Image Expander

Published by Chris Coyier

I was asked by artist Zoran Pekoviċ if the effect on the homepage on their site, which is currently done with Flash, could be done with HTML, CSS, and JavaScript.


View Demo   Download Files

I thought it seemed like a fun challenge, so I gave it a shot. The browser support probably isn't as deep as Flash, but hey, it's easier to tweak and works in Mobile Safari.

I'm not going to drop tons of code here because there isn't anything new that we haven't covered before. Essentially, the intro is some div's animated (extra non-semantic div's aren't ideal, but somethings are unavoidable and I don't think they are abused here). For the images, all nine of them are absolutely positioned with backgrounds positioned to reveal the correct portion of them. When clicked (JavaScript) the transition to being the size of the full area with that background-position set back to 0 0;

Comments

  1. You’re out of control

  2. Tony Saad
    Permalink to comment#

    Greate Challenge :-)
    That’s Creative
    I never thought it can be done without flash

  3. marines
    Permalink to comment#

    It doesn’t behave the same way on Opera.

    • T.J. Crowder
      Permalink to comment#

      Indeed not, I noticed that too. It works, but the relationship of the images is less clear because it only ends up in the right place when the image has fully animated. Still impressive.

  4. ali nouman
    Permalink to comment#

    nice

  5. Doug T
    Permalink to comment#

    Why no jQuery easing effect to help with some of the “jerky” nature of the CSS transitions? (Still awesome though)

  6. Permalink to comment#

    Wow, Its really awesome… :)

  7. Permalink to comment#

    Actually, is a good idea!

    Also really simple to realize using CSS3…

  8. Philippe
    Permalink to comment#

    Obviously it’s not (yet) a job for CSS anims – it’s jerky in all browsers but Firefox 5 and it even completely crashed my MBP when trying in Safari.
    However it’s an interesting case where Flash could definitely be replaced by HTML.

  9. Andrew
    Permalink to comment#

    Works fine on my Chrome, very cool.
    I like avoiding Flash as much as possible, so to see you do this is great.

  10. Funky.

  11. Permalink to comment#

    Very nice. Doesn’t work too well in chrome or safari. Works best in Firefox.

  12. Permalink to comment#

    You could perhaps try using clip CSS property instead. Simple example here: http://jsfiddle.net/Uem9w/embedded/result/

    • I agrre; I think clip() is the way to go. Here’s a fuller example: http://jsfiddle.net/e8zur/embedded/result/

      Works on IE8+ (minus animation) and handles keyboard focus. The checkbox solution further down also handles focus/blur nicely, unlike this one where a little bit extra JS is required for handling click on expanded image (although it’s still usable without JS). However, the checkbox solution is webkit-only, as far as I can tell.

  13. Wow, amazing stuff!!

  14. T.J. Crowder
    Permalink to comment#

    Nice one, Chris. It even works in IE7. As noted above, the animation part is a bit off in Opera, though once the animation stops it’s correct again.

    Be terrific if there were a way to get rid of the JavaScript altogether. Barring that, it seems like a more JS-heavy solution might be simpler with broader browser support.

    But that takes nothing away from this being a great example of what you can do with CSS nearly on its own.

  15. Permalink to comment#

    Chris – this is awesome… I’m all about obliterating Flash from the face of the earth.

    On another note – I freaking LOVE your footer. I find myself wasting 3 or 4 minutes every time I’m on your site just rolling on and off your head… thanks bro.

  16. Permalink to comment#

    Awe the wicked power of CSS, I love it. It’s amazing what can be accomplished in CSS if you put your creative mind to it.

  17. Permalink to comment#

    Great work – a little choppier than the Flash, but still very excellent work nonetheless!

  18. Sweeeeet. Challenges aside, this is one of those few instances where Flash is probably the right tool for the job. Still, quite impressive.

  19. Moinak Sau
    Permalink to comment#

    great work chris .

  20. Permalink to comment#

    Haha seriously awesome. There should be some sort of Flash to CSS / Jquery contest. I love seeing things like this!

    • Alistair
      Permalink to comment#

      Flash was fun back in the day. Good to see all the Swish and Flash days being a smidge transferable. Thanks as ever for the topics Chris.

  21. theAntilli
    Permalink to comment#

    Proves that Flash isn’t as dead as Stevie has hoped.
    There still is quite some stuff that Flash has an edge on. And it works an all but iOS browsers.
    That said, Googles HTML5/JS, etc Music Videos are really cool. They don’t really run any that many browsers though.

  22. Permalink to comment#

    A very cool technique indeed!! I can see uses for this… so thanks for doing the hard work to get it working.

  23. Permalink to comment#

    This is awesome :) but it has some animation glitches on chrome (windows). I took Lim Chee Aun’s idea (a few comments above) on using the clip property and made this:

    http://jsfiddle.net/Keyamoon/Uem9w/31/

    (click and hold images. I’m using the active state)

    The animation is smooth, and the html is cleaner.

    • Permalink to comment#

      Yes, this one is cleaner.
      I tried implement this using jquery animate, but since ‘background-position’ property of an element are not handled as integers in jQuery, it didn’t work properly. Sure CSS3 is amazing :)

  24. jVaughn
    Permalink to comment#

    Hey Chris ever thought of video tutorials please!!!!!!

  25. OwenB
    Permalink to comment#

    The problem with any CSS only bit for the moment (except for Webkit where you setup animation queues, IIRC), is that the z-index will never be quite right.

    If all the 9 elements start with the same z-index, then the first one will go over the others when the z-index is changed while animating out, but will revert while animating back in.

    A quick fix I found was to change the z-index on hover, since the user will most likely not have moved their mouse off the same element (though I suspect this depends on the speed of the animation too!) … leFiddle

    I’m pretty sure you could come up with a nice version using div’s with BG images, and using the background-position, BUT, animate the width/height/top/left, while leaving the background position clamped to top/middle/bottom & left/center/right.

    Still wouldn’t be as easy to setup as the clipping IMG tags method though.

    • Permalink to comment#

      You can use div’s with background images *and* clip the div’s instead of IMG’s.

    • Permalink to comment#

      The way I handled it was incrementing the z-index upwards via the JavaScript on every single click. So the latest clicked element always has the highest.

  26. sage
    Permalink to comment#

    I don’t really like your way of handling z-index.

    Why is it different to just add a css “.active { z-index: 1; }” and never position z-index directly ? Each time you click, you’re putting the active class anyway, so it should be “that much different”.

    Did you do that for a certain purpose ?

    • Permalink to comment#

      Because the .active class needs to be removed when it’s clicked again, which would remove that higher z-index immediately. When actually, it needs to retain that higher z-index for a little bit of time (until the transition ends). As far as I know there is no way to delay something like that (like a callback could in JavaScript).

  27. Permalink to comment#

    I love that idea! so great!! 9 Thumbs of different images makes one :)

  28. stryju
    Permalink to comment#

    i’ve done my take on this one

    NO JS USED ;-) pure CSS awesomeness

    checked on chrome, just to see if i can make it work for any browser – if u want to, pls feel free to improve it for other browsers

    i find the animation running smoother ;-)

    http://jsfiddle.net/stryju/f2ESq/

  29. Permalink to comment#

    Great concept, only webkit browsers produce any jerky actions.

  30. Its Look Like a puzzle …..But Great :)

  31. Chandru
    Permalink to comment#

    Fantastic Work :_)

  32. jumancy
    Permalink to comment#

    It works only in Chrome

  33. frame (bg) could be black or white.

    have you tried to play around with jQuery? excellent case for that :)

  34. Permalink to comment#

    Nice work Chris, but how ’bout that artwork? I’m amazed.

    d.

  35. Hannah
    Permalink to comment#

    this is insane..

  36. Permalink to comment#

    Great work, makes me think it might be nice to create a section on your site where people put your great tuts to work…you issue a challenge and they must make it work in Chrome, FF and Safari for it to be accepted..maybe even an occasional contest for one of those awesome free shirts, eh? :-)

    Great art and good job with the code Chris…you da man!

  37. fred
    Permalink to comment#

    Now THAT is cool. Nicely done, sir.

  38. Brian S
    Permalink to comment#

    Works great on IE 9. Pretty Cool!

  39. Permalink to comment#

    A lot of our clients want an alternative to Flash since the general speed of ADSL in developing countries is still problematic. This is just great! Now the browsers must just come to the party.

  40. Pooya
    Permalink to comment#

    Extraordinary!
    you ARE a coder

  41. Permalink to comment#

    Chris, thanks so much,
    it looks great!

    Pekta
    (author of those 9 images)

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".