Question

我有一个sqare图像，它使用border-radius变成一个圆圈：50％;到目前为止，这很有效。 ;）但下一步很难做到：我希望图像能够缩放＆＃34;更接近＆＃34;通过使用transform：scale。我的意思是：我不想改变相同尺寸的图像，它应该保持相同的直径。但我想展示一小部分图像。应在以下位置激活缩放：悬停，应在0.8秒的时间段内处理。

我的代码在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：＆＃34; zoom＆＃34;工作，但在过渡时间（o，8s），图像有sqare边框。在交易发生后，他们四舍五入。

2）Safari：转换时间被忽略，转换立即发生，没有＆＃34;软＆＃34;缩放。

3）IE：我不敢看看IE，如果它甚至不能在Safari和Chrome中运行。 ;）

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

Answer 1

根据Harry's建议修正广场，这个也适用于Safari。

首先，前缀属性应该在未加前缀，第二，不要使用所有，如

transition: all ...

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

transition: transform 0.8s

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

为我解决此问题的原因是：

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

边界半径为50％的图片和变换（比例）

3 个答案: