Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Coded blocks unformat themselves on actual site


BenRentstart

Question

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 post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 0

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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?

Link to post
  • 0
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.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...