Jump to content

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

Recommended Posts

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:

img00.thumb.png.35649a700d927ce1cc86761c79f24d2a.png

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! 

Link to comment
  • Replies 8
  • Views 1.2k
  • Created
  • Last Reply

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.

Link to comment
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.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
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)
}

 

Link to comment
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.  

Link to comment

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.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
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! 🙏

Link to comment
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. 🙂

Link to comment
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. ☺️

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.