css - 我正在尝试使用此 codepen CSS 效果，但缩放效果不太有效。

Question

我正在尝试从 this 复制缩放 #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;
}

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

你可以在this上看到它页面(密码:测试)

我认为它可能与容器图像中的溢出:隐藏有关，但我使用的是模板并使用 firefox 检查器，图像 div 容器似乎是#le_body_row_2_col_1_el_1.element-container。 cf.condition_small

我已经添加了一个 overflow:hidden 到这个 div 但仍然没有成功。

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

如果有人能提供帮助，我们将不胜感激。非常感谢。

Answer 1

我已经做了demo，希望对你有帮助
http://codepen.io/anon/pen/MKyRrM

    .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;
}