Background image of child div not clipping to area of parent div

[blimpage]

Hey there! Check out this example of the problem I’m having:
http://dabblet.com/gist/2177352/

Basically, what I’m after is a circle containing a greyscale image which, when hovered over, transitions into a square containing a colour version of that same image.

To do this, I’ve created a parent div and a child div – the parent has the colour image as its background, and the child has the greyscale image as its background.
When the parent div is hovered over, its border radius transitions from 50% to 12.5%, and the child div’s opacity transitions from 1 to 0.

The overflow of the parent div is hidden, so theoretically nothing inside it should be visible outside of its border.
In Firefox, this is working exactly as I want it to. However, in Chrome and Safari, the child div (greyscale image) does not clip to the area of the parent div. It’s a bit different in each browser:

• In Chrome, the greyscale image is clipped properly when no animation is happening, but during animation, the full square image is visible.
• Safari is almost the same as Chrome, except the greyscale image crops to the border-box of the parent div instead of the content-box.

Any tips as to how to make this work cross-browser?

[Vermaas]

Well it won’t be cross-browser, because IE doesn’t support transition’s at the moment. But this might be a nice solution for you: http://jsfiddle.net/savver/fjP8M/

BTW: Keep in mind that every browser (on this moment) need a browser prefix. So you need to define the transition for mozilla, webkit, opera and IE (although they don’t support transitions, yet).

Thought mozilla already accepts the css3 transition instead of -moz-transition, but i’m not for sure.

[blimpage]

Cheers!
I know IE doesn’t support transitions yet, I’m still just throwing around concepts with this. I’m sure I’ll be able to work out something that doesn’t look too terrible for IE.

That jsFiddle does work consistently across browsers, but I’m really hoping to keep the fade from grey to colour, because it’s so much prettier.

I’ve tried out something else – having both the parent div and the child div transition their border radius from 50% to 12.5% at the same time:
http://dabblet.com/gist/2189939

I thought it would be very buggy and laggy, but it actually seems to be working well across Firefox, Safari and Chrome. I may just stick with this unless anyone can point out a good reason why I shouldn’t?

And yeah, I’m all over the browser prefixes – I’m experimenting on Dabblet so I won’t have to worry about it for the moment, since it uses -prefix-free.

[Author]

Posts