border-radius 50% 和 transform(scale) 的图片

Question

我有一个正方形图像，通过使用 border-radius: 50%; 变成了一个圆形；到目前为止效果很好。 ;) 但下一步很难做到：我希望通过使用 transform: scale 将图像缩放 "nearer"。我的意思是：我不想改变图像的相同尺寸，它应该保持相同的直径。但我想展示图像的一小部分。缩放应在 :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："zoom" 有效，但在过渡时间 (o,8s) 期间图像具有正方形边框。过渡发生后，它们被舍入。

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

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

感谢您的想法。我尝试了很多不同的东西，none 成功了。拉斐尔

Answer 1

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

Answer 2

根据修复正方形的建议，这个应该也适用于 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>

Answer 3

为我解决这个问题的是：

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

border-radius 50% 和 transform(scale) 的图片

picture with border-radius 50% and transform(scale)

css

transform

scale