Question

当我将鼠标悬停在img放大的项目上时，我试图将它设置在哪里。我尝试使用它：

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

但是当我把它放在上面时，整个容器就会增长。我甚至尝试将类增长放在保持图像的范围上但它也做同样的事情。

然后我尝试了：

.grow { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
}
.grow:hover { 
    /*transform: scale(1.1);*/ 
    background-size: 150%;
    overflow: hidden;
}

但这也不起作用。它从左上角缩放背景，没有缓和。

如何修改代码以实现我正在寻找的缩放效果？

Answer 1

如果我理解正确，你的图像似乎正在做你想要他们做的事情，除非你想要更大的变焦，在这种情况下你要调整你的背景尺寸：

.grow:hover {
    background-size: 130% 130%;
    opacity:1.0;
}

或您选择的缩放级别

如何使图像在其容器内生长以创建缩放效果？

1 个答案: