border-radius не работает во время перехода

Question

Я использую маскирующий элемент для клипа изображения, а затем масштабирования этого изображения при наведении.

Я не могу понять, почему граничный радиус, по-видимому, прекращает существование на маскирующем элементе во время перехода.

http://codepen.io/corysimmons/pen/rOvdXX?editors=110

<div class="mask"> 
    <img src="http://placekitten.com/505/505"> 
</div> 

.mask 
    overflow: hidden 
    width: 300px 
    height: 300px 
    border-radius: 999em 
    img 
    transition: all 500ms ease 
    &:hover 
    img 
     transform: scale(1.2) 

Answer 1

Попытка и добавить Z-индекс к маске размещения его на верхней части изображения.

.mask 
    overflow: hidden 
    width: 300px 
    height: 300px 
    border-radius: 50% 
    z-index : 1; 
    position : relative; 
    img 
    transition: all 500ms ease 
    &:hover 
    img 
     transform: scale(1.2)