边框半径为 50% 和变换（缩放）的图片答案

【问题标题】：picture with border-radius 50% and transform(scale)边框半径为 50% 和变换（缩放）的图片
【发布时间】：2017-04-13 17:32:13
【问题描述】：

我有一个方形图像，它通过使用边框半径变成一个圆形：50%；到目前为止效果很好。 ;) 但是下一步很难做到：我希望图像通过使用 transform: scale 缩放“更近”。我的意思是：我不想改变图像的相同大小，它应该保持相同的直径。但我想显示图像的一小部分。缩放应该在 :hover 上激活，并且应该在 0.8s 的时间内处理

我的代码在 Firefox 中完美运行，但在 Chrome 和 Safari 中却不行。我的错误在哪里？

我的 HTML：

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

我的 CSS：

.hopp_circle_img {    
width: 100% !important;
height: 100% !important;   
max-width: 100% !important;
max-height: 100% !important;
overflow: hidden; 
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}

.hopp_circle_img img {    

   transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s; 
}  

 .hopp_circle_img img:hover {
display: block;
z-index: 100; 
transform: scale(1.25);
-moz-transform: scale(1.25);
-webkit-transform: scale(1.25);
-o-transform: scale(1.25);
-ms-transform: scale(1.25);
     }

问题：
1）Chrome：“缩放”有效，但在过渡时间（o，8s）期间，图像有方形边框。过渡发生后，它们是圆形的。

2) 野生动物园：过渡时间被忽略，过渡立即发生，没有“软”缩放。

3) IE：我不敢看 IE，如果它在 Safari 和 Chrome 中都不起作用。 ;)

感谢您的想法。我尝试了很多不同的东西，但都没有奏效。拉斐尔

【问题讨论】：

对于您的第一个问题，可以在这里找到答案 - stackoverflow.com/questions/31693219/…
谢谢，但是我该如何解决这个问题？我还尝试在圆圈上放置一个带有图像的图层，以便在圆圈生长时对其进行遮盖。问题是，面具停止了：悬停。所以它或多或少没用。
该答案的 What is the solution? 部分以及 LGSon 在此处提供的答案中都有。他们不帮你解决第一个问题吗？
@Harry +1 为您的border-radius 修复

标签： css transform scale

【解决方案1】：

Harry's 建议修复方块，这个应该也可以在 Safari 中使用。

首先，有前缀的属性应该在无前缀之前，其次，不要像在

中那样使用all

transition: all ...

命名要转换的属性，在这种情况下

transition: transform 0.8s

注意，您需要将其余的前缀属性添加回来

.hopp_circle_img {
  position: relative;           /*  new property added  */
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 0;                   /*  new property added  */
}
.hopp_circle_img img {
  -webkit-transition: transform 0.8s;    /*  re-ordered property, named      */
  transition: transform 0.8s;            /*  what to be transitioned         */
}
.hopp_circle_img img:hover {
  display: block;
  z-index: 100;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}

<div class="hopp_circle_img">
  <img src="http://lorempixel.com/400/400/nature/1" alt="" />
</div>

【讨论】：

感谢您清除我的代码。然而，它在 Chrome 中不起作用。在您的（清除的）代码中有一个新的 z-index-staple。这是解决方案是什么中的建议之一？部分。但这并不能解决我的问题。
@rabox66 这个可以在 Chrome 中使用。确保您没有忘记.hopp_circle_img 上的position: relative;，这是z-index 工作所必需的
LGSon。万分感谢！我会再试一次，但你为我准备了一切，所以我只需要复制代码。也许是缓存。我实际上是在使用缓存插件进行 wordpress 安装。这可能很烦人。
好的，它是缓存插件。 ;) 谢谢！
这个 chrome 错误有一个功能解释。 click here

【解决方案2】：

好的，我取得了第一个成功：将 .hopp_circle_img img:hover 更改为 .hopp_circle_img:hover 解决了 Safari 中的问题。但它仍然保留在 Chrome 中。

【讨论】：

【解决方案3】：

为我解决了这个问题的是：

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

【讨论】：