Css 边框半径为50%的图片和变换（比例）

我有一个sqare图像，它通过使用边界半径变成一个圆：50%；到目前为止，效果相当不错；但下一步很难做到：我希望使用transform:scale将图像放大。我的意思是：我不想改变相同大小的图像，它应该保持相同的直径。但我想展示一小部分图像。缩放应在：hover上激活，并应在0.8s内进行处理

我的代码在Firefox中运行得很好，但在Chrome和Safari中却不行。我的错误在哪里

我的HTML：

<div class="hopp_circle_img">
     <img src="... alt="" />
</div>

问题是： 1 Chrome：缩放可以工作，但在过渡时间o，8s内，图像有sqare边框。在转移发生后，它们是圆形的

2狩猎： 忽略过渡时间，过渡立即发生，无需软缩放

3 IE：如果IE在Safari和Chrome中都不起作用，我就不敢看一眼

谢谢你的想法。我尝试了很多不同的方法，但没有一种有效。

---

拉斐尔

好的，我取得了第一个成功： 将.hopp_circle\u img img:hover更改为.hopp_circle\u img:hover修复了Safari中的问题。但它仍然是铬的

根据修复广场的建议，这个应该也适用于Safari

首先，前缀属性应该在unfixed之前，其次，不要像中那样使用all

在本例中，命名要转换的属性

transition: transform 0.8s

注意，您需要重新添加其余的前缀属性

.hopp_circle_img{ 位置：相对；/*添加了新属性*/ 宽度：100%！重要； 身高：100%！重要； 最大宽度：100%！重要； 最大高度：100%！重要； 溢出：隐藏； -webkit边界半径：50%； 边界半径：50%； z索引：0；/*已添加新属性*/ } .hopp_circle_img img{ -webkit转换：转换0.8s；/*重新排序的属性，命名为*/ 转换：转换0.8s；/*要转换的内容*/ } .hopp\u circle\u img img：悬停{ 显示：块； z指数：100； -webkit转换：scale1.25； 转换：scale1.25； }

---

对我来说，解决这个问题的方法是：

.hopp_circle_img { 
    transform: scale(.99);
}

---

对于您的第一个问题，这里有答案-谢谢，但我如何解决问题？我还试图在圆圈上放置一个带有图像的图层，以便在圆圈生长时遮住它。问题是，掩码会停止：悬停。因此，它或多或少是无用的。它存在于解决方案是什么？该答案的第节以及LGSon在此提供的答案。他们没有帮你解决第一个问题吗？@Harry+1谢谢你清除我的密码。然而，它不工作在铬。在清除的代码中有一个新的z索引装订。这是《解决方案是什么》一书中的建议之一？部分但这并不能解决我的问题。@rabox66这一个在Chrome中可以工作。确保你没有忘记位置：相对；在.hopp_circle_img上，这是z索引到workgson所需的。多谢各位！我会再试一次，但是你为我的工作准备了一切，所以我只需要复制代码。也许是缓存。我实际上是在用缓存插件安装wordpress。这可能很烦人。好吧，这是缓存插件；非常感谢。这个chrome bug有一个功能解释。

transition: transform 0.8s

.hopp_circle_img { 
    transform: scale(.99);
}