CSS help needed | hover image | zoom in effect

Question

I have this page built in DIVI WordPRess:

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

When you hover over an image, I want the zoom effect to work - but the image overlaps outside it's div area.

I used the CSS code from here: https://codepen.io/Remedy/pen/ZYJrpp

my CSS code which doesn't work is here:

.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);
}

I use firefox browser and I did right click> inspect element on the image, in order to see what class it's been assigned. I've tried different classes, but this seems to be the closest class that looks like what I'm trying to achieve. I basically want the background image to zoom, but not overlap the way it does and keep within the DIV.

Thanks!

Answer 1

You have to add some css like below:

.et_pb_portfolio_item {
    overflow: hidden;
}

Answer 2

You need to hide any overflow that is caused by the zoom.

Simply add overflow:hidden to the .et_portfolio_image and you are done.

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

Answer 3

add this style

.et_portfolio_image, .et_shop_image { overflow: hidden; }

Answer 4

Thank you to all, the code worked perfect, for benefit of answering this post, I used David's answer:

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

Thank you, the page looks fantastic now!