需要CSS幫助| 懸停圖片| 放大效果

Question

我在DIVI WordPRess中建立了此頁面：

http://www.wilderfilms.co.uk/wp/work/

當您將鼠標懸停在圖像上時，我希望縮放效果起作用-但圖像在div區域之外重疊。

我從這里使用了CSS代碼： https ： //codepen.io/Remedy/pen/ZYJrpp

我的CSS代碼不起作用在這里：

.et_portfolio_image img {
    max-width: 100%;

   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
}

.et_portfolio_image:hover img {
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
}

我使用firefox瀏覽器，並右鍵單擊了圖像上的檢查元素，以便查看已為其分配了什么類。 我嘗試了不同的類，但這似乎是我想要達到的最接近的類。 我基本上希望背景圖像縮放，但不希望重疊並且保持在DIV中。

謝謝！

Answer 1

您必須添加一些CSS，如下所示：

.et_pb_portfolio_item {
    overflow: hidden;
}

Answer 2

您需要隱藏由縮放引起的所有溢出。

只需將overflow:hidden添加到.et_portfolio_image ，即可完成。

.et_portfolio_image, .et_shop_image {
    display: block;
    position: relative;
    overflow: hidden; }

Answer 3

添加此樣式

.et_portfolio_image，.et_shop_image {溢出：隱藏； }

Answer 4

謝謝所有人，代碼工作完美，為了回答這篇文章，我使用了大衛的答案：

.et_portfolio_image, .et_shop_image {
    display: block;
    position: relative;
    overflow: hidden; }

謝謝，頁面現在看起來棒極了！