Nine Image Expander

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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;