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)
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.
No problem Josh! Oh, and I only give away my crappy experiments - the good stuff will cost you. I'm thinking like $200k should get you into the VIP section. =)
P.S. - That's my little bro, and, sadly, his team sucks at lacrosse. lolz
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.
P.S. - That's my little bro, and, sadly, his team sucks at lacrosse. lolz
http://webdev.stephband.info/parallax.html
Talk about popping!