Rollover blur on Portfolio page

I'm trying to match an effect seen on a Squarespace site. When a rollover happens on a project in the portfolio page, the project image blurs, here is the reference https://yarzatwins.com/ I'm using the standard Grid: Overlay template and have been unsuccessful implementing CSS code. I have additional CSS code for fonts. Anyone got some guidance? Thanks

Hi,

Can you share link to page where you use Grid? We can check easier

Sure thing, here you go https://recorder-groundhog-phjz.squarespace.com/our-work

On 6/5/2023 at 9:15 PM, Estian said:

Sure thing, here you go https://recorder-groundhog-phjz.squarespace.com/our-work

The site is private. Can you setup an access password? We can access easier

Sure thing, here you go:

https://recorder-groundhog-phjz.squarespace.com/
TheKineticSquarespace546

I have the same issue - saw this Yarza Twins page and liked the blur effect... tried 3 types of css codes but it won't work on my homepage/portfolio

my website (in construction) is alexmcesar.com (if it asks for a password, it's heyyou)

thanks!

On 6/5/2023 at 9:15 PM, Estian said:

Sure thing, here you go https://recorder-groundhog-phjz.squarespace.com/our-work

23 hours ago, alexmcesar said:

I have the same issue - saw this Yarza Twins page and liked the blur effect... tried 3 types of css codes but it won't work on my homepage/portfolio

my website (in construction) is alexmcesar.com (if it asks for a password, it's heyyou)

thanks!

You mean remove overlay?

Thanks for the response. I'm looking to create an effect where if a user rolls over the the image or cover of a portfolio project, the image blurs. I've attached a screen recording of the effect that I'm referencing of a different Squarespace website

21 hours ago, Estian said:

Thanks for the response. I'm looking to create an effect where if a user rolls over the the image or cover of a portfolio project, the image blurs. I've attached a screen recording of the effect that I'm referencing of a different Squarespace website

Add to Design > Custom CSS
 

a.grid-item:hover .grid-image {
    filter: blur(1px);
}
.portfolio-overlay {
    opacity: 0 !important;
}

Fantastic! Thanks!