Help... Rollover hover effect causes page to jump around?

Hello

So I am having an issue on my main page.
I have a mouseover hover effect on some images that displays or shows a text box when you hover over the image, this causes the page to jump around when viewed in safari or firefox and when using the editor in chrome, it doesn't seem to do it when viewing the page in chrome browser on its own.

website
creativejourney.life
sp: nga2023

Also...
An unrelated question to the issue above, how do I turn off the hide/reveal effect in edit mode so I can edit the text boxes?

So new issue whenever I edit my mobile version of my site my CSS hover effect stops working...

I have a hover effect where a text box appears under my gate images on my home page, I have deleted everything and started over twice and as soon as I edit the mobile version code it all stops working.

/* Home Door 1 Hover Text */
.fe-block-f5c934caa91889b9e570 {
  display: none;
  pointer-events: none;
  @media screen and (max-width:767px) {
    display: block;
  }
}

.fe-block-yui_3_17_2_1_1678404060999_4355:hover ~.fe-block-f5c934caa91889b9e570 {
  display: block;
}

/* Home Door 2 Hover Text */
.fe-block-ff32fbe389b37d7b7de5 {
  display: none;
  pointer-events: none;
  @media screen and (max-width:767px) {
    display: block;
  }
}

.fe-block-yui_3_17_2_1_1678403196682_6422:hover ~.fe-block-ff32fbe389b37d7b7de5 {
  display: block;
}

/* Home Door 3 Hover Text */
.fe-block-1e85010964a3f108df10 {
  display: none;
  pointer-events: none;
  @media screen and (max-width:767px) {
    display: block;
  }
}

.fe-block-yui_3_17_2_1_1678385933045_5384:hover ~.fe-block-1e85010964a3f108df10 
{
  display: block;
}

Hi,

Which page are you referring to?

the home page but its gotten all screwed up Im going to have to start over I think. All the page elements keep sliding around I had to dump my CSS code a bunch of times and start over. I can't even edit the page now without something move or shifting on me and whenever I edit the mobile version it screws up the regular version even worse.

These effects were working fine a few months ago without any problem then they just stopped working.

I didn't change anything I just logged in this week and everything was messed up.

Now I can't seem to fix it 😞

I removed the effect from the other two images only "World Building" doorway image has the effect still, I think I'm going to just remove the animation and hover effect and see if that changes anything. 

I really like it... it adds some kool flash to the site but its not worth the headache if I can't get to work properly or it breaks all the time.

I setup a page called HOME2 its linked at the top menu that has the effect working...

I redid it on a separate page and it seems to be working there...

I was also using a text box with background originally, I like it better but I had issues with that so on HOME2 I used a separate shape and text box and altered the code to incorporate that... Im going to try adding the old version to the second image and see if it works or not.

Here's some code Im using for the HOME2 page

Still have the issue if I edit the mobile version everything stops working

now that I have added the hover effects and animations to this page I can no longer edit the page everything is moving around on me again.

/* HOME2 TEST */
/* BG */
.fe-block-yui_3_17_2_1_1678418564612_23150 {
  display: none;
  pointer-events: none;
  @media screen and (max-width:767px) {
    display: block;
  }
}

.fe-block-yui_3_17_2_1_1678418564612_14015:hover ~.fe-block-yui_3_17_2_1_1678418564612_23150 
{
  display: block;
}
/*  text */
.fe-block-yui_3_17_2_1_1678418564612_28726 {
  display: none;
  pointer-events: none;
  @media screen and (max-width:767px) {
    display: block;
  }
}

.fe-block-yui_3_17_2_1_1678418564612_14015:hover ~.fe-block-yui_3_17_2_1_1678418564612_28726
{
  display: block;
}
/* END HOME2 TEST */

/* HOME2 TEST 2 */
/* Text with BG */
.fe-block-7037f3f1143f999c8e88 {
  display: none;
  pointer-events: none;
  @media screen and (max-width:767px) {
    display: block;
  }
}

.fe-block-6f912b053e299dd59052:hover ~.fe-block-7037f3f1143f999c8e88 
{
  display: block;
}
/* END HOME2 TEST 2 */

Here's what I figured out..

anytime I apply CSS to formatting an element on the page no matter what it is it freaks out and the page elements move around or stop working al together. If you use the site without any CSS code at all it works fine and has no issues

This is problem because Squarespace removed elements that I used in my page before when they updated to the fluid method so now I have to code them back in with CSS, so I can either have a page that looks weird, change my design and use something basic and boring or leave Squarespace till they fix the problem.

the fact that I cannot use CSS code really not acceptable

I tried this code on a text box and same thing happened
I made a new page with nothing else on it to do the test and same things happened everything stopped working when I used the CSS code.. once I removed the code everything went back to normal and worked fine.

.fe-block-yui_3_17_2_1_1678469370930_40214 {

    padding-top: 6% !important;

    padding-bottom: 18% !important;

    padding-right: 6% !important;

    padding-left: 6% !important;

}