CODEWITHSUNDEEP
csswebkit
Fluidbyte
Fluidbyte

Reputation: 5210

Overflow and Rounded Borders on Webkit

I'm trying to build a circular region with a hidden panel that slides up inside of the circle. This seems to work perfectly on Firefox, however, with Chrome/Webkit there is no 'masking'. I'm assuming there's some sort of CSS trick to this but I've been banging my head against a wall thus far...

http://jsfiddle.net/HQDdR/1/

Upvotes: 0

Views: 53

Answers (1)

Ana
Ana

Reputation: 37169

You could use radial gradients and then you wouldn't even need the container and the holder - DEMO.

Relevant CSS:

#top {
    overflow: hidden;
    width: 300px;
    height: 300px;
    border-radius: 50%;
}
#slider {
    height: 600px;
    background: radial-gradient(circle, gainsboro 70.71%, transparent 70.71%) 
            no-repeat 0 100%;
    background-size: 300px 300px;
    transition: .3s;
}
#top:hover #slider {
    height: 300px;
}

I've animated the height of the slider, but you could also animate the background-position.

Upvotes: 1

Related Questions