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

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%);
  }
}

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);
}
}

Legend! Thanks so much @tuanphan 👍

@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? 

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? 

 

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);
}

@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? 

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

@tuanphan my apologies, in the meantime I answered my own question. thanks for your support!