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

Question

http://darrenbachan.com/

我试图让它在我将鼠标悬停在项目上时 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;
}

或您选择的缩放级别

Answer 2

如果你想放大图像，那么你必须将CSS应用于img而不是容器。

如果您也能提供HTML代码会更清楚。

了解图像位于 .grow 内，这里是 css 代码

.grow {
position: relative;
overflow: hidden; /* Ensures that the zoomed image doesn't overflow out of the container */
       }

     .grow img {
width: 100%; /* Ensure the image fits within the container */
transition: transform 0.3s ease-in-out; /* Smooth zoom effect */
              }

         .grow img:hover {
transform: scale(1.1); /* Zoom effect */
             }