Hover customisation for an image

Hi guys, site is not live yet so I cant put URL down but was wondering what code is required to unblur a photo when a mouse hovers over it. I've attached some screenshots for reference.

Basically, I want the images with the overlay text to be blurred until the mouse hovers over, where then I want the image to not be blurry. Is this possible?

Thanks!!

38 minutes ago, dekiv said:

Basically, I want the images with the overlay text to be blurred until the mouse hovers over, where then I want the image to not be blurry. Is this possible?

Hey @dekiv You can use css option filter: blur() https://developer.mozilla.org/ru/docs/Web/CSS/filter-function/blur() , so css code might be:

.image {
  filter: blur(4px);

  &:hover {
    filter: blur(0);
  }
}

@SquareRefresh Thanks for that but I have never used Squarespace before. Where do I input the CSS for that particular page and section?

7 minutes ago, dekiv said:

Thanks for that but I have never used Squarespace before. Where do I input the CSS for that particular page and section?

Add Your code to the Design > Custom CSS

@SquareRefresh Yeah I copied in the code you sent above but it didnt do anything different?

5 minutes ago, dekiv said:

Yeah I copied in the code you sent above but it didnt do anything different?

Ofc, it's just an example, You should to add correct selector instead of my .image class.

@SquareRefreshYeah I've tried putting in the correct class but it just blurs the whole page. Not sure what I'm missing here.

Site is live now as well - www.harissabp.com.au (What We Do) section

@SquareRefreshAwesome! That worked. Thank you so much!

4 minutes ago, dekiv said:

Awesome! That worked. Thank you so much!

Always happy to help!