Почему на время transition перестает работать border-radius?

Question

[Никита Иванов]

В общем на одном сайте, у меня есть блок, в котором есть картинка,занимающая 100% блока

<div>
     <img src="image.png">       
</div>

У этого блока стоит border-radius:10px и overlay:hidden
Картинка на 100% ширины блока
При ховере на блок - картинка увеличивается на 30% через transform: scale() и на нее накладывается немного blur

div{
  overflow: hidden;
  border-radius: 10px;
  width: 300px;
  height: auto;
}
img{
width:100%;
border-radius: 10px;
transition: 1s all;
}
div:hover img{
-webkit-transform: scale(1.30, 1.30);
  -ms-transform: scale(1.30, 1.30);
  transform: scale(1.30, 1.30);
  -webkit-filter: blur(2px);
  filter: blur(2px);
}

Так вот, во время того, как происходит transition картинки - border-radius и overfow:hidden как будто исчезают
Вернее они есть, но то, что выходит за пределы скругленного угла - отображается достаточно тускло.
А после завершения анимации - все выглядит как надо.

Выглядит это так:

1) Ховера нет


2) Навели мышку, началась анимация, появились углы


3) Анимация завершилась, углы снова исчезли


При обратной анимации - "угловатость" тоже появляется

Залил на jsfiddle

Answer 1

[Евгений Петров]

Как скруглить углы у картинки, когда используется эффект увеличения при наведении?
Ваш пример

Comments

[Никита Иванов]

Спасибо огромное!