I'；我正在尝试使用这个代码笔CSS效果，但是缩放效果不太好。

我试图复制codepen的zoom#1悬停效果

在这个codepen演示中，图像放大，但容器大小保持不变

这里是图像的css

    .hover01 figure img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.hover01 figure:hover img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

图像容器也有此代码

    figure {
    width: 300px;
    height: 200px;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}

当我在页面上使用它时，我的图像会缩放

您可以在第页看到它（密码：test）

我认为这可能与溢出有关：从容器图像中隐藏，但我使用了一个模板和firefox检查器，似乎图像div容器将是#leu body_row_2_colu 1_el_1.element-container.cf.condition_small

我添加了一个溢出：隐藏到这个div，但仍然没有运气

所以我现在不知道。我在css/html模板定制方面没有太多经验。要么不是我缺少的溢出属性，要么我没有在正确的div上使用它

---

如果有人能帮忙，我将不胜感激。非常感谢

我已经做了演示，希望它能有所帮助

    .hover01 figure img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover01 figure:hover img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}
figure {
    width: 500px;
    height: 450px;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}