Css，Html5放大效果，img开箱即用

Question

图像开箱即用。我这样想似乎不对。如果有人能帮忙，我会很高兴的。非常感谢。在这里你可以找到演示

.box { 
width:210px;
height:210px;
border-radius:50%;
border:3px solid yellow;
cursor: default;
overflow: hidden;

}

img{
overflow: hidden;
width:210px;
height:210px;
z-index:-1;
display: block;
position: relative;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
 -ms-transition: all 0.6s ease-in-out;
 transition: all 0.6s ease-in-out;

}

.box:hover img{
 -webkit-transform: scale(2);
 -moz-transform: scale(2);
 -o-transform: scale(2);
 -ms-transform: scale(2);
 transform: scale(2);
}

Answer 1

问题似乎只出现在webkit浏览器上。我在捕捉到边界半径属性崩溃的规模转换后做了一些研究，我发现了这个

溢出：隐藏忽略边界半径和CSS转换（仅限webkit）

您必须将-webkit mask image:放在父div中才能解决这个问题。

 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);

http://jsfiddle.net/Jx8xF/16/

编辑：请注意，背景大小是一项昂贵的操作-请参阅Fix4上的这篇文章。删除背景大小的CSS属性，如果它降低了你的网站速度http://kristerkari.github.io/adventures-in-webkit-land/blog/2013/08/30/fixing-a-parallax-scrolling-website-to-run-in-60-fps/

最后，您可以看到，使用scale（）css转换方法放大图像比背景大小更平滑

EDIT2：代码更新http://jsfiddle.net/Jx8xF/19/

在Safari 5.1.7、Chrome、Mozilla、IE10、Opera、Opera Next 上测试

正如你所看到的，Safari浏览器只有在第一次修复后才有问题。对于他，你需要设置

 -webkit-transform: translateZ(0); 

这还不是全部。您需要为border bug分组两层，并用另一个div将其封装。在代码中，您可以在HTML和CSS文件中看到完整的修复。

Answer 2

通过删除img元素，而将图像用作.box元素上的背景，可以更好地实现此效果。然后在background-size属性上使用transition。

以下是CodePen的一个工作示例。下面的代码示例。

.box { 
  -webkit-transition: all 0.4s ease;
    width:210px;
    height:210px;
    border-radius:100%;
    border:3px solid yellow;
    background: url('http://fc07.deviantart.net/fs71/f/2012/144/b/6/barn_owl_leather_mask_by_teonova_by_teonova-d50xl3v.jpg') center center;
    background-size: 100%;
  }
.box:hover{
    -webkit-transition: all 0.4s ease;
    background-size: 150%;
}