css - 边框半径为 50% 并进行变换(缩放)的图片

Question

我有一个方形图像，通过使用 border-radius: 50% 将其变成圆形；到目前为止效果很好。 ；)但是下一步很难做到:我希望通过使用变换:缩放将图像缩放“更近”。我的意思是:我不想改变图像的相同尺寸，它应该保持相同的直径。但我想展示图像的一小部分。缩放应该在 :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) Safari : 过渡时间被忽略，过渡立即发生，没有“软”缩放。

3) IE:我不敢看 IE，因为它在 Safari 和 Chrome 中都不起作用。 ;)

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

Answer 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>