Help with CMS collection page layout/transitions

Hi, so I am having this weird problem…

I am making a CMS collection page that has a large gallery image (connected to CMS) a header and a CMS paginated thumbnail collection - that in essence should be imitating a dynamic slider.
I made two buttons: 1. one that will bring up information about the image on display and 2. zoom in the picture to practically full viewport width.
the buttons work by using custom code jquery that toggle/add/remove combo-classes on different page div’s and using various effects.

here’s the kicker - the transition to “zoom in” - reduces the height of the header and the height of the cms thumbnail collection, and while the transition when the header changes is smooth, when the the height of the cms thumbnail collection changes and the image enlarges, the image size jumps in the end… I have rechecked every effect transition of every elemen, tried to even add “all” transition - but I can’t figure out what is causing it…

any help will be greatly appreciated…

For bonus points :grin:,

  1. if anyone can tell me how I can add a transition and or interaction to animate changing pages of the cms thumbnail collection I will be very grateful!
  2. is there a way to create a zoom in function the image so that it opens in fullscreen (without using third party js)

Thank you in advance to everyone who tries to help !


Here is my site Read-Only: IVGphoto

anyone? I really am struggling here…