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

您需要隐藏由缩放引起的任何溢出。

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

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

Answer 2

你必须添加一些css，如下所示：

.et_pb_portfolio_item {
    overflow: hidden;
}

Answer 3

添加此样式

.et_portfolio_image，.et_shop_image { 溢出：隐藏;}

Answer 4

谢谢大家，代码工作得很好，为了回答这篇文章，我使用了大卫的答案：

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

谢谢，页面现在看起来很棒！