Coded blocks unformat themselves on actual site

Site URL: https://rentstart.org

Hello 

I have created a 'meet our team' page using code blocks instead of image blocks so that I can use hover over effects in which the images change (as per this tutorial). 

After wrestling with some formatting issues, it now looks fine when I'm logged in: 

But when I go to the actual URL, the spacing changes, the image sizes change, the hover over effect changes:

Any help much appreciated! 

(Even if there's a better way of creating this page with hover over effects)

You can use Image Blocks, we can give code to create change image on hover effect.

56 minutes ago, tuanphan said:

You can use Image Blocks, we can give code to create change image on hover effect.

Great, what would that code be? And how would one use it with Image Blocks?

On 8/13/2020 at 5:24 PM, BenRentstart said:

Great, what would that code be? And how would one use it with Image Blocks?

Add Image Blocks, then share url again, we can give code easier.

21 hours ago, tuanphan said:

Add Image Blocks, then share url again, we can give code easier.

Hello again - Ok, I've created a page that's the same but with image blocks containing the main images. 

So how would I now create the hover over effect of showing an alternative image?

https://rentstart.org/meet-our-team-1

Thank you 🙂

Add to Home > Design > Custom CSS

/* Hide images on hover */
/* this code apply on all images on meet our team page */
div#page-section-5f3b76c807bfe705191712b2, div#page-section-5f3b76c807bfe705191712b4 {
  .image-block:hover img {
      visibility: hidden;
  }
  .image-block:hover figure {
    background-size: cover;
    background-repeat: no-repeat;
  }
}
/* Show image on hover */
/* 1 image = 1 code */
/* image 01 */
div#block-yui_3_17_2_1_1597732554812_19400:hover figure {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
}
/* image 02 */
div#block-yui_3_17_2_1_1597732554812_23370:hover figure {
	background-image: url(https://beaverhero.com/wp-content/uploads/2019/08/momentum-squarespace.jpg);
}

Repeat for other images. Find Image Block ID with this tool. https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde