Image changes to another image when hovering

Site URL: https://www.heartwoodsaunas.com/team

Hi there,

I'm new to Squarespace and updating a page on a website - I would like to be able to have set images, then hover over each  and have it change to another image. Can anyone help with this?

Add to Design > Custom CSS (first image). Repeat Similar for other images

div#block-f725aad622781654f51a:hover img {
    content: url(https://cdn.pixabay.com/photo/2022/05/16/19/14/road-7201023__480.jpg);
}

Find image block id with this code

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

48 minutes ago, tuanphan said:

Add to Design > Custom CSS (first image). Repeat Similar for other images

div#block-f725aad622781654f51a:hover img {
    content: url(https://cdn.pixabay.com/photo/2022/05/16/19/14/road-7201023__480.jpg);
}

Find image block id with this code

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Thanks! Is this ok with 7.0? 

14 hours ago, Lex-Elin said:

Thanks! Is this ok with 7.0? 

It will work with your case.