Jump to content

Coded blocks unformat themselves on actual site

Recommended Posts

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)

Link to comment
  • Replies 5
  • Views 626
  • Created
  • Last Reply

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.