У меня небольшая анимация на изображении центральной части, она немного масштабируется, а затем возвращается к исходному размеру.Как оживить элемент и не потерять радиус границы?
Проблема, анимация «перекрывает» радиус границы для родительского элемента, даже если он переполнение скрытых на нем.
Любые идеи?
Это ошибка в Webkit. overflow: hidden не скрывает переполнение трансформированного элемента по углам. Для получения дополнительной информации см. https://bugs.webkit.org/show_bug.cgi?id=67950.
Проблема заключается в background-color вашего .image класса расширяется до величин #promo и прикрывает border-radius установленный pane класса.
Вы должны установить:
background-color: transparent; //in image class,
и,
background-color: #91bd09;
в вашем pane классе.
См. Это updated fiddle.
Если вы разместите изображение там, у вас все еще будет проблема. Обратите внимание, что текст по-прежнему отображается за пределами границы. –
Ну, я не CSS ниндзя ... Так что спасибо за вашу информацию :) Я просто пробовал с частью 'border', это дает мне положительный результат, который я сказал здесь ... в ближайшее время позаботится .. :) – Asif