.tricky {
width:200px;
height:200px;
border-radius: 50%;
border: 0px solid;
background: #2373bd;
display:inline-block;
position:relative;
overflow: hidden;
}
.tricky_image {
width:100%;
height:100%;
-moz-transition: all .6s ease;
-webkit-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
opacity:0.7;
border-radius: 50%;
filter:alpha(opacity=70);
overflow:hidden;
}
.tricky_image:hover {
opacity:1;
filter:alpha(opacity=100);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
<!doctype html> <html> <head> </head> <body> <div class="tricky"> <img class="tricky_image" src="location_images/sanfranciscoweb.png" alt="Example"> </div> </body> </html>
我想要的效果只适用于Firefox,我假设IE.我开始使用带有蓝色背景的div包装器的透明图像.当用户将鼠标悬停在图像上时,我希望它放大并将不透明度恢复到100％而不会破坏div包装器的设置宽度和高度.这在Firefox中完美运行,但是当我在Chrome中运行动画时,图像超出了它背后的蓝色div包装器的宽度.这是我的代码,任何帮助将不胜感激& JS Fiddle http://jsfiddle.net/yaLupdzo/1/：
<!doctype html>
<html>
<head>
<style>
.tricky {
width:200px;
height:200px;
border-radius: 50%;
border: 0px solid;
background: #2373bd;
display:inline-block;
position:relative;
overflow: hidden;
}
.tricky_image {
width:100%;
height:100%;
-moz-transition: all .6s ease;
-webkit-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
opacity:0.7;
border-radius: 50%;
filter:alpha(opacity=70);
overflow:hidden;
}
.tricky_image:hover {
opacity:1;
filter:alpha(opacity=100);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
</style>
</head>
<body>
<div class="tricky">
<img class="tricky_image" src="location_images/sanfranciscoweb.png" alt="Example">
</div>
</body>
</html>
解决方法
这是在此提交的已知问题：
https://code.google.com/p/chromium/issues/detail?id=157218
在Webkit中,通过硬件加速,动画层在动画期间被提升到不同的渲染表面,然后在动画完成后降级.
原来有一个简单的解决方案.通过向其添加轻量级动画,将容器元素“提升”为与硬件加速子项相同的渲染层：
.tricky {
width: 200px;
height: 200px;
border-radius: 50%;
border: none;
background: #2373bd;
display: block;
overflow: hidden;
-webkit-transform:scale(1.0);
}
.tricky_image {
width: 200px;
height: 200px;
-webkit-transition: all .6s ease;
opacity: 0.7;
}
.tricky:hover {
-webkit-transform:scale(1.0);
}
.tricky:hover .tricky_image {
opacity: 1;
-webkit-transform:scale(1.2);
}
见：http://jsfiddle.net/yaLupdzo/3/
请注意,我还在父容器的默认状态中添加了一个简单的动画,因此在悬停时不会发生同样的问题.
