So my internet got knocked out by that EPIC east-coast storm last night – I’m working on a client site and had a cool CSS3 idea I wanted to flesh out down on paper, so I thought I would take an hour or so to demo it. Basically, its a way to have clipped sections of images ‘pop’ off of their original image. You could do a lot with this to reward newer browsers – though I’ve done a bit to make sure it degrades well and works as cross-browser as possible. (hint – hover)
http://meetaaronsilber.com/experiments/css3imgpop/index.html
I had tried to accomplish this with a base image, and use a webkit-mask-image to crop the section for giggles – but transitions seem to fail with masked images. I’m also doing some z-index switching here on hover so that the masked .png is under the base img until hover. I don’t think that IE 5.5 or 6 support :hover on anything other than text – so the idea is that they can still download and save the base img (at least).
The ‘view stats’ button goes nowhere – its just a demo. I would have loved to have simply used a text-stroke property on the player text, but it doesn’t work well that way – so I’ve used text-shadow.
The only thing I don’t like is how the masked ‘pop’ image snaps at the end of the transition when users mouseout. If you’ve got a fix for that, please post.
If you’ve got any questions – please ask. I like to share.
