The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS3 hover image technique – “Just make it pop”

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #32238

    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


    psst – there is no reason somebody couldn’t apply another layer and little parallax action via;

    Talk about popping!


    VERY cool!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.