Border-Radius and Overflow Bug - Webkit and Presto

by marakoss

HTML

<div class="rounded">
    <div class="move">
        
    </div>
</div>

CSS

.rounded {
    
    width: 300px;
    height: 300px;

    background: #eee;

    overflow: hidden; /*This is Important*/    
    
    -webkit-border-radius: 300px;
    border-radius: 300px;
    
    position: relative;

}

.move {
    width: 300px;
    height: 300px;
    background: #f55;
    position: absolute;
    
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.move:hover{
    left: -100px;
    opacity: 0;
}