与边界半径画面50％和变换（标度）(picture with border-radius 50% a

我有一个sqare图像至极变成一个圆，通过使用边界半径：50％; 这工作得很好至今。 ;）但下一步是很难做到的：我想要的图像通过变换放大“更近”：规模。 我的意思是：我不想改变图像的大小相同，它应该保持具有相同的直径。 但我想，以显示图像的一小部分。 在一段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）铬：“缩放”的作品，但在过渡时间（O，787-8）的图像具有sqare边界。 在变迁理论发生后，他们四舍五入。

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

3），即：我不敢看看IE，如果它甚至没有在Safari和Chrome浏览器。 ;）

感谢您的想法。 我尝试了很多不同的东西，他们没有工作。 拉斐尔

Answer 1:

随着哈利的建议来解决方，这应该在Safari中正常工作。

首先，前缀属性应该是之前没有前缀，第二，不要在使用所有

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 2:

好吧，我有一个第一次成功：更改.hopp_circle_img img:hover到.hopp_circle_img:hover固定在Safari的问题。 但它仍然是在Chrome。

Answer 3:

什么修复了这个问题对我来说是：

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

文章来源: picture with border-radius 50% and transform(scale)