我正在尝试使用这个 codepen CSS 效果，但缩放效果不太好。答案

【问题标题】：I'm trying to use this codepen CSS effect but the zooming effect does not quite work.我正在尝试使用这个 codepen CSS 效果，但缩放效果不太好。
【发布时间】：2016-03-26 07:50:52
【问题描述】：

我正在尝试从 this codepen 复制缩放 #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页面上看到它（密码：test）

我认为这可能与溢出有关：从容器图像中隐藏，但我使用模板并使用 Firefox 检查器，看起来图像 div 容器将是#le_body_row_2_col_1_el_1.element-container。 cf.condition_small

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

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

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

【问题讨论】：

标签： css wordpress templates hover

【解决方案1】：

我做了演示，希望对你有帮助
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;
}

【讨论】：