Trying to figure out how to get all images to by default be using grayscale, and when hovered on, show the color again.

By default, I want all images to appear as completely grayscale or filter: grayscale(1); 

When a user hovers over any image, I want it to be recolored. How can I accomplish this? 

My website is here: 

https://tuba-porcupine-4w63.squarespace.com/

Password: password

Custom CSS that's working to make the default colored: 

canvas{ 
filter: grayscale(1); 
}

img {
filter: grayscale(1);
}

I've tried the below, but it doesn't work... I've also tried using the specific CSS selectors tied to each image individually and it still doesn't work. I'm extremely confused since I've used CSS pretty extensively before. 

canvas:hover{ 
filter: none;  
}

img:hover{
filter: none; 
}

Your site is private.

Please set up a site-wide password.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

@creedonI've set the password to "password" and added it to my original post. Thanks

@creedon following up here, were you able to access the site? 

Yes.

Here is some code for a start.

.sqs-block-image {

  filter : grayscale( 1 );
  
  }

.sqs-block-image:hover {

  filter : unset;
  
  }

Let us know how it goes.