Black & white portfolio - when the mouse is moved over the image, it becomes colored

Hello everyone, 

I'd like to know if it's possible to change the images on the exposed projects when the mouse moves over them. 
Is it possible, for example, to have images that at first glance are all in black and white, and when we move the mouse over them the image changes to become colored? You can find attached an example.

Thank you in advance for your invaluable help. 

Yes. We can use CSS to do this. Can you share link to page in screenshot?

Hello, thanks for your answer.
Here the link : https://vincentcoste.com/work-1 

I found this code : 

list-item-content { margin-top:-58%; background:linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,.5) 25%, #000 75%); padding: 1rem; transition: all 1s; z-index:99; opacity:0} .list-item:hover .list-item-content { transition: all 1s; opacity:1}.list-item-content *{color:#FFF!important} .list-item-media {transition: all 1s;filter:grayscale(1);}.list-item:hover .list-item-media {transition: all 1s;filter:grayscale(0)!important;}

but I don't know where I have to copy that code 

I found on YouTube this code below and its workin : 

.image-block { filter: grayscale(100%);} .image-block:hover { filter: none;} 
.image-block { filter: grayscale(100%); transition: filter .5s ease-in-out;}  .image-block:hover { filter: none;} 

But now I want this code to affect only one page of my website, but I can't find it at the moment. 

Thanks in advance for your help

You can add Page ID before the code, something like this

#enter-page-id {
.image-block { filter: grayscale(100%);} .image-block:hover { filter: none;} 
.image-block { filter: grayscale(100%); transition: filter .5s ease-in-out;}  .image-block:hover { filter: none;} 
}

Use this code to find Page ID

Ok great. Thank you for your help. 

Also, is it possible to display a title at the same time as this effect? 

On 8/22/2024 at 5:33 PM, Rmng_ said:

Ok great. Thank you for your help. 

Also, is it possible to display a title at the same time as this effect? 

I see image zoom, title appear already in same time.

On 8/24/2024 at 7:20 AM, tuanphan said:

I see image zoom, title appear already in same time.

Yes in fact. how can you make this effect on squarespace? Do I need css ? 

20 hours ago, Rmng_ said:

Yes in fact. how can you make this effect on squarespace? Do I need css ? 

I see it already have this here, or if it is not your site, you can share link to your site, I can check easier

https://vincentcoste.com/work-1

This is our website : https://maracas-sparrow-583n.squarespace.com 

Hello, I'm joining this conversation because I'm also interested in using the code, but entering CSS puts the section ID and the block ID but doesn't sell the effect. Can you help me?

The section is just where I mention the projects I share and screen capture. The link is https://www.networkingec.com/ Password: Roberto