我正在嘗試使用此codepen CSS效果，但縮放效果不起作用。

Question

我想從this 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; 
} 

當我使用它在我的網頁上，我的形象得到縮放。

你可以看到它在this頁（密碼：測試）

我想它可能有溢出的事：從容器圖像隱藏，但我使用模板，用firefox督察，它看起來像圖像div容器會＃le_body_row_2_col_1_el_1.element-container.cf.condition_small

我已經添加了一個溢出：隱藏到這個div但仍然沒有運氣。

所以我現在無能爲力。我沒有太多關於css/html模板定製的經驗。要麼它不是我缺少的溢出屬性，或者我沒有在正確的div上使用它。

如果有人可以提供幫助，將不勝感激。非常感謝。

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