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

我有一个sqare图片，通过使用边框半径变成一个圆：50％;迄今为止效果很好。 ;）但下一步很难做到：我想通过使用transform：scale使图像变得“更近”。我的意思是：我不想改变图像的大小，它应该保持相同的直径。但我想展示图像的一小部分。这个缩放应该在hover上激活，并且应该在0.8s的时间内处理。边界半径为50％的图片和变换（比例）

我的代码在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）Safari：转换时间被忽略，转换立即发生，没有“软”缩放。

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

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

来源

2016-11-29 rabox66

对于你的第一个问题，答案可以在这里找到 - http://stackoverflow.com/questions/31693219/issue-while-using-transitions-opacity-change-overflow-hidden/31698580#31698580 – Harry

谢谢，但我该如何解决问题？ iI还试图在圆上放置一个图像图层，以便在成长过程中屏蔽该圆。问题是，面具停止：悬停。所以它或多或少是无用的。 – rabox66

它在那里的答案是什么解决方案？**部分和LGSon在这里提供的答案。他们不帮你解决第一个问题吗？ – Harry

随着Harry's建议修复广场，这一个应该在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>

来源

2016-11-29 16:35:32 LGSon

谢谢你清除我的代码。尽管如此，它并不适用于Chrome。在你的（清除）代码中有一个新的z-index-staple。这是什么解决方案中的建议之一？部分。但它不能解决我的问题。 – rabox66

@ rabox66这个可以在Chrome中使用。确保你没有忘记'.hopp_circle_img'上的'position：relative;'，这是'z-index'工作所需要的 – LGSon

LGSon。万分感谢！我会再试一次，但你准备好了所有的东西，所以我只需要复制代码。也许这是缓存。我实际上使用一个缓存插件来进行wordpress-installtion。这可能很烦人。 – rabox66

行，我有一首成功：更改.hopp_circle_img img:hover到.hopp_circle_img:hover固定在Safari中的问题。但它仍然在Chrome中。

来源

2016-11-29 16:25:17 rabox66

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

回答

相关问题