css - 如何在图像悬停放大过渡期间保留图像圆 Angular ？

Question

DEMO

悬停时放大图像很容易。
图像圆形边框很容易。
将它们组合起来，OK，但是圆 Angular 在过渡过程中消失了。
过渡后，圆 Angular 又回来了。
问题:如何在过渡期间保留圆 Angular ？

.img-wrapper {
    border-radius: 10px;
}

.img-wrapper img {
    transition: transform .5s ease;
    transform:scale(1);
}

.img-wrapper img:hover {
    transform:scale(1.5);
}

Answer 1

尝试添加这个:

.img-wrapper {
    border-radius: 10px;
    position:relative;
    z-index:1;
}

如果还是不行，试试这个问题: overflow:hidden ignored with border-radius and CSS transforms (webkit only)