Question

CSS转换在图像悬停时无法使用chrome，请查看JSFiddle示例

HTML

<div class="screenThum">
  <a href="#" class="portfolio" style="background-image:url(http://toffeeglobal.com/images/mockup1.png);"></a>
</div>

CSS

.screenThum .portfolio{
  width:350px; 
  display:block; 
  height:100%; 
  background-size:100%; 
  background-repeat:no-repeat; 
  height:250px; 
  position:relative; 
  opacity:0.4; 
  -webkit-transition: all .8s ease-in-out;
  -moz-transition: all .8s ease-in-out;
  -ms-transition: all .8s ease-in-out;
  -o-transition: all .8s ease-in-out;
   transition: all .8s ease-in-out;
 }

 .screenThum .portfolio:hover{
   opacity:0.9; 
   background-size:120%;
 }

我已经尝试过以前的SO答案，但没有使用我的代码，不确定什么是错的？

感谢

Answer 1

如果您对此感到满意，那么您可以使用transform:scale 得到同样的效果。 已修改：参考 @Alexandre Beaudet

.screenThum{
    overflow: hidden;
    width: 350px;
    height: 250px;
}
.screenThum .portfolio{
  width:350px; 
  display:block; 
  height:100%; 
  background-size:100%; 
  background-repeat:no-repeat; 
  height:250px; 
  position:relative; 
  opacity:0.4; 
  -webkit-transition: all .8s ease-in-out;
  -moz-transition: all .8s ease-in-out;
  -ms-transition: all .8s ease-in-out;
  -o-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;}

.screenThum .portfolio:hover{
    opacity:0.9; 
   -moz-transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);   
    }

<div class="screenThum"><a href="#" class="portfolio" style="background-image:url(http://toffeeglobal.com/images/mockup1.png);"></a></div>

Answer 2

尝试设置screenThump width＆amp;溢出：隐藏。然后使用transform：scale（x）属性。这样您就可以获得缩放效果，图像也不会超出容器宽度。

.screenThum {
  overflow:hidden;
  width: 350px;
}
.screenThum .portfolio{
  width:350px; 
  display:block; 
  height:100%; 
  background-size:100%; 
  background-repeat:no-repeat; 
  height:250px; 
  position:relative; 
  opacity:0.4; 
  -webkit-transition: all .8s ease-in-out;
  -moz-transition: all .8s ease-in-out;
  -ms-transition: all .8s ease-in-out;
  -o-transition: all .8s ease-in-out;
   transition: all .8s ease-in-out;
 }

 .screenThum .portfolio:hover{
   opacity:0.9; 
   transform: scale(3);
 }

背景图像悬停过渡不工作在铬

2 个答案: