How to Add Transform to Parent Elements but NOT Child Elements

Hey Everybody,

I’m setting up an image gallery on my home page. When you click on an image, a dynamic CMS modal pops up to provide information about that image. I’d like to have it so that when I hover over the image (in this case the images are column backgrounds) I’d like to have the image turn Greyscale. I know how to set up all the hover affects, transitions etc.

The issue is that since the dynamic modal is nested inside the column as a Child element (please correct me if I’m misunderstanding that), the hover/greyscale affects are causing conflicts with the nested modal once it’s been clicked and opened.

Any idea how I can fix this? If you take a look at my Read Only link you’ll see that the top left image in the gallery doesn’t have the transforms applied while the right image of the old man with the pipe does.


Here is my public share link: https://preview.webflow.com/preview/brendan-cole-photography?utm_medium=preview_link&utm_source=designer&utm_content=brendan-cole-photography&preview=51eef4b7042919de6fd9d6f643a3df79&mode=preview