overflow:hidden игнорируется с помощью border-radius и CSS-преобразований (только webkit)

Я удалил лишнюю разметку (круглые и квадратные контейнеры... нужен только один) и стилизовал сам img:

#wrapper {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

#test {
  width: 100%;
  height: 100%;
  transition: all 2s linear;
}

#test:hover {
  transform: scale(1.2);
}

<div id="wrapper">
  <img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA1LzA4L2JlL2JhYmllc193aXRoLjA5NGNjLnBuZwpwCXRodW1iCTg1MHg1OTA-CmUJanBn/8f195417/e44/babies_with_swagg.jpg" id="test">
</div>

Вам нужно добавить этот код к родителю вашего img:

position:relative;
z-index:1;

Пример здесь: http://codepen.io/DavidN/pen/dIzJK

Добавьте этот код в родительский div и решите проблему:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);

Похоже, вы стилизовали слишком много элементов! Я создал форк здесь

Я отредактировал часть вашего кода SASS, чтобы использовать библиотеку компаса и лучше использовать свойства transition и transform, которые можно увидеть здесь:

body { padding: 3em; }

.circle {
    height: 500px;
    width: 500px;
    border: 1px solid black;
    @include border-radius(500px);
    overflow: hidden;
}

.circle img {
    height: 500px;
    width: 500px;
    @include transition(all 0.3s ease);
    &:hover { @include transform(scale(1.1)); }
}

Надеюсь, это поможет! Просто подумайте об элементе circle как о родительском контейнере, который содержит общую информацию о пространстве (например, 500px в ширину и 500px в высоту). Само изображение имеет закругленную границу 500px. Это элемент, который вы хотите отредактировать! Здесь вы можете масштабировать и трансформировать этот элемент, не взаимодействуя с родительским контейнером circle. См. compass для получения дополнительной информации об использовании библиотеки! Удачи!