Add animation

I'm trying to add a simple animation to page content when it loads, targeting the class main. This works all well and good but it disrupts the image zoom overlay (the images don't display in the lightbox).

Is there any way to target this div but ignore the native zoom effect? I don't know much about the zoom effect stuff but wondering if there's a way.

.main {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInMoveUp 0.3s ease-out forwards;
}

@keyframes fadeInMoveUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}