[Beginner] Hover distortion effect not working in div (but works in section)

Hi everyone, complete newbie here - thanks in advance for your understanding in that regard! I’m trying to implement this image hover distortion effect within Squarespace.

var myAnimation = new hoverEffect({ parent: document.querySelector('.section-background'), image1: 'https://i.ibb.co/rb1VzvS/bg.png', image2: 'https://i.ibb.co/rb1VzvS/bg.png', displacementImage: 'https://i.ibb.co/WGKQSkh/displacement.png', imagesRatio: 667 / 1000, });

The hover effect currently doesn’t work within the section-background div. But if I simply replace .section-background with .page-section (section in which the section-background div exists), for example, the hover effect does work, however the images show up off to the side of the site and not where I need them to be. Any ideas as to what the issue might be?

If it helps at all, the site I’m working on is lizzykain.com (password is “test”).