CSS Page Transitions for specific pages

Hello

I’m trying to recreate the page transition/overlay effect you see when you click to view any of the hotel properties in this website (link in private) If you click to view Riverscapes for example, the next page loads with a colored overlay and some text, then after clicking a section in the submenu, the overlay fades out, the image turns to normal saturation, and the rest of the page loads. I know the transition was created using css webkit transitions, no javascript.

On the website I’m working on (link in private), I would like to apply this effect to three pages: Community, Collaboration, and Conservation. I’ve created new template pages for each of these, copying page.php and renaming them community-page.php, etc. and loading them to the child theme. Using the plugin What the File, it appears that these pages are being read correctly.

So when I try to add a new <div> or <section> to add the classes I need for the page transitions in each page template, they aren’t showing up when I check for them in the page source. I feel like I could hook these effects to the #top div id, but then the transitions would apply to every page, so I need a way to customize each page transition for each of these three pages.

Thanks in advance for your help!