CSS help needed | hover image | zoom in effect

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!