Как оживить элемент и не потерять border-radius?

Question

У меня есть небольшая анимация на центральном изображении, она немного увеличивается, а затем возвращается к исходному размеру.

Код здесь!

Проблема в том, что анимация "переопределяет" радиус границы родительского элемента, даже если на нем скрыто переполнение.

Есть идеи?

Answer 1

Это ошибка в Webkit. overflow: hidden не скрывает переполнение преобразованного элемента по углам. Для получения дополнительной информации просмотрите https://bugs.webkit.org/show_bug.cgi?id=67950.

Answer 2

Проблема в background-color вашей .image класс расширяется до #promo и прикрывает border-radius установить с помощью pane учебный класс.

Вы должны установить:

background-color: transparent; //in image class,

а также,

background-color: #91bd09;

в вашем pane учебный класс.

Смотрите эту обновленную скрипку.