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

Image blocks from b/w hover to colour code not working


emmebellish

Question

Site URL: https://pigeon-wrasse-ez6s.squarespace.com/our-talent

Hi!

I've used this code for the /our-talent page, and it doesn't seem to be working! They are just image blocks.

The site password is tdh

Any help would be much appreciated!

[data-section-id="61180fa029ce272084aed3b7"] {
img{
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
  }

img:hover{
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}

Link to comment

7 answers to this question

Recommended Posts

  • 0

Hi,

Use this new code

[data-section-id="61180fa029ce272084aed3b7"] {
img{
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
  }

.image-block>div:hover img {
    filter: grayscale(0);
	-webkit-filter: grayscale(0);
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@tuanphan I'm trying to apply the same for a background image, but for some weird reason - while the initial grayscale code works, the hover state does not work. I'm testing on the header image.

URL: https://www.leadwithbliss.squarespace.com

Pass: leadwithbliss

Code: 

.section-background img {
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
  }

.section-background img:hover {
    filter: grayscale(0);
	-webkit-filter: grayscale(0);
}

But when I use the inspector and force the hover state, it works (see attachment). 

Any ideas as to why this might be? 

 

Screen Shot 2021-09-22 at 6.01.32 PM.png

Edited by stellaehabib
Link to comment
  • 0
On 9/23/2021 at 4:59 AM, stellaehabib said:

@tuanphan I'm trying to apply the same for a background image, but for some weird reason - while the initial grayscale code works, the hover state does not work. I'm testing on the header image.

URL: https://www.leadwithbliss.squarespace.com

Pass: leadwithbliss

Code: 

.section-background img {
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
  }

.section-background img:hover {
    filter: grayscale(0);
	-webkit-filter: grayscale(0);
}

But when I use the inspector and force the hover state, it works (see attachment). 

Any ideas as to why this might be? 

 

Screen Shot 2021-09-22 at 6.01.32 PM.png

There are no way to fix this. Will need to add code to hover whole section >> change image

this code

/* top section */
[data-section-id="60b7d5fa672bce3b21d97454"]:hover .section-background img {
    filter: grayscale(0);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 9/26/2021 at 10:21 PM, stellaehabib said:

@tuanphan ah ok. thank you - that does work. so to clarify, it is not possible to change to colour on hover for individual images? like if I wanted to apply this to the resources page, for example? 

Hi,

The resource page url doesn't exist

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...