需要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; }

谢谢，页面现在看起来棒极了！