How can I edit a class without affecting the same class on other sections? (IMAGE HOVER)

Site URL: https://dog-sunflower-g2n5.squarespace.com/

Hi guys, 

I badly need to know how can I implement a hover successfully, without having to affect other section with the same class? Because when I tried implementing it to this section:

Other section's image blocks where also affected. I tried using the #id of each but no luck as well. 

Can someone please enlighten me with this? So I will know if I should continue working with squarespace and if it's worth it to subscribe to their business plan.

Will I have more code access when in business plan? Like how we can access the html codes in wordpress/shopify/webflow? 

Thank you, will really appreciate your help! 

I use business plan and I can do:

1. Custom CSS
2. Header/Footer code injection (Site wide)
3. Header code injection to any individual pages (only that page will be affected)
4. Header code injection in blogs (Affects the entire blog collection. Same feature is there for other collection items like portfolios, store, and events)
5. Code injection into blog posts. (Affects only the post itself.) 
6. Add custom code blocks that can have HTML/CSS/JavaScript which will affect that individual page.

So far the customizability has been enough for me. Obviously a completely self-hosted website will have more customizability but it totally depends on your preference and amount of customization you want on your site.

2 hours ago, macydyeser said:

I badly need to know how can I implement a hover successfully, without having to affect other section with the same class?

Normally it is done by targeting the class inside the block ID. Download a chrome extension called Squarespace collection/Block identifier. It will show you the ID of the block. Then use that ID and target the class inside it. The changes will apply only to that block.

4 hours ago, macydyeser said:

I badly need to know how can I implement a hover successfully, without having to affect other section with the same class

It's difficult to help you as your site is currently private and we cannot see the issue.

As a first step, please set a public password in the visibility settings and then share this with us.

Next, tell us which page you need help with.

Lastly, please post the code you are using.

5 minutes ago, paul2009 said:

It's difficult to help you as your site is currently private and we cannot see the issue.

As a first step, please set a public password in the visibility settings and then share this with us.

Next, tell us which page you need help with.

Lastly, please post the code you are using.

Hi @paul2009,

I changed the visibility setting, password is: pass123. I just need it for the homepage. Thank you.

and here is the code I used, I inserted this one in the css editor:

.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card-wrapper {
   visibility: hidden;
   opacity: 0;
  transition-duration: 1s;
}

.sqs-block-image:hover .image-block-outer-wrapper.image-block-v2 .image-card-wrapper {
   visibility: visible;
   opacity: 1;
  background-color: hsla(43, 45%, 66%, 0.74)
}

1 hour ago, aravsanj said:

I use business plan and I can do:

1. Custom CSS
2. Header/Footer code injection (Site wide)
3. Header code injection to any individual pages (only that page will be affected)
4. Header code injection in blogs (Affects the entire blog collection. Same feature is there for other collection items like portfolios, store, and events)
5. Code injection into blog posts. (Affects only the post itself.) 
6. Add custom code blocks that can have HTML/CSS/JavaScript which will affect that individual page.

So far the customizability has been enough for me. Obviously a completely self-hosted website will have more customizability but it totally depends on your preference and amount of customization you want on your site.

Normally it is done by targeting the class inside the block ID. Download a chrome extension called Squarespace collection/Block identifier. It will show you the ID of the block. Then use that ID and target the class inside it. The changes will apply only to that block.

Hi @aravsanj, thank you for your help, appreciate it!

Quote

Normally it is done by targeting the class inside the block ID. Download a chrome extension called Squarespace collection/Block identifier. It will show you the ID of the block. Then use that ID and target the class inside it. The changes will apply only to that block.

That's how I actually did it or maybe there is something wrong with how I fetch the class. I successfully made the code work on that section. However, it is also affecting other images on other parts of the website, which it's not supposed to.  

To limit this effect to the top section of this page (the section with the data-section-id of 60bdc228ef82ad6c71cce98f) you should replace your existing CSS with the following:

section[data-section-id="60bdc228ef82ad6c71cce98f"] .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card-wrapper {
  visibility: hidden;
  opacity: 0;
  transition-duration: 1s;
}

section[data-section-id="60bdc228ef82ad6c71cce98f"] .sqs-block-image:hover .image-block-outer-wrapper.image-block-v2 .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color: hsla(43, 45%, 66%, 0.74)
}

As you'll see, this is the same as the CSS you were using, but prefixed with the section ID so that the styling is limited to this section only.

1 minute ago, paul2009 said:

To limit this effect to the top section of this page (the section with the data-section-id of 60bdc228ef82ad6c71cce98f) you should replace your existing CSS with the following:

section[data-section-id="60bdc228ef82ad6c71cce98f"] .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card-wrapper {
  visibility: hidden;
  opacity: 0;
  transition-duration: 1s;
}

section[data-section-id="60bdc228ef82ad6c71cce98f"] .sqs-block-image:hover .image-block-outer-wrapper.image-block-v2 .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color: hsla(43, 45%, 66%, 0.74)
}

As you'll see, this is the same as the CSS you were using, but prefixed with the section ID so that the styling is limited to this section only.

It worked! Thank you so much! 🙏

2 hours ago, macydyeser said:

That's how I actually did it or maybe there is something wrong with how I fetch the class. I successfully made the code work on that section. However, it is also affecting other images on other parts of the website, which it's not supposed to.  

A block ID will look something like this: #block-cb0e9bf85a17a26ee343. In the below code, you're targeting the whole class across the site. 

2 hours ago, macydyeser said:

.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card-wrapper {
   visibility: hidden;
   opacity: 0;
  transition-duration: 1s;
}

.sqs-block-image:hover .image-block-outer-wrapper.image-block-v2 .image-card-wrapper {
   visibility: visible;
   opacity: 1;
  background-color: hsla(43, 45%, 66%, 0.74)
}

Anyways, I saw it has been fixed. Good work. 🙂

On 6/9/2021 at 6:54 PM, aravsanj said:

A block ID will look something like this: #block-cb0e9bf85a17a26ee343. In the below code, you're targeting the whole class across the site. 

Anyways, I saw it has been fixed. Good work. 🙂

Yes I was able to fix it with everyones help. Thank you! I'm so glad It worked. ☺️