如何在图像悬停放大过渡期间保留图像圆角？答案

【问题标题】：How to retain image round corners during transition of image hover zoom in?如何在图像悬停放大过渡期间保留图像圆角？
【发布时间】：2015-09-03 16:36:50
【问题描述】：

DEMO

悬停时放大图像很容易。
图片圆形边框很简单。
将它们组合起来，好的，但是圆角在过渡期间会消失。
过渡后，圆角又回来了。
问题：过渡期间如何保留圆角？

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

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

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

【问题讨论】：

标签： css

【解决方案1】：

尝试添加这个：

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

如果仍然无法正常工作，请尝试以下问题： overflow:hidden ignored with border-radius and CSS transforms (webkit only)

【讨论】：

【解决方案2】：

将-webkit-mask-image: -webkit-radial-gradient(circle, white, black); 添加到img-wrapper 类中并在此处添加一些样式是fiddle

【讨论】：

@KaFaiLo 请检查一下并告诉我！！
这是我第一次看到mask-image。 Pepo_rasta的答案测试ok，更简单。

【解决方案3】：

将你的边框半径从你的包装移动到你的图像。

.img-wrapper {
    width: 400px;
}

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

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

【讨论】：

放大时蓝色边框消失。
fiddle：不，要求是在图像放大时看到相同的可见图像尺寸 - 看到图像的侧面更少。您的小提琴在放大时会显示整个图像，因此可见尺寸会发生变化。