Portfolio Hover Image Opacity

Site URL: https://sponge-dalmatian-cgjy.squarespace.com/

Hello all,

I have a portfolio page as my cover page currently with the layout Hover: Fixed. I have icons that are supposed to be transparent as the hover images, but Squarespace is adding a black overlay on top of them. A Squarespace agent let me know that this is an known issue but that I would currently need to use custom coding to get rid of the overlay. I was wondering if anyone here could help me out? 

The website is password protected, the pw is 123. I've attached a screenshot of what I mean - I do not want the gray background there. If there's also a way to reduce the actual transparency of the image itself through custom coding so that the project titles can be seen and not just blend in, that would be great as well. 

16 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

.portfolio-hover-bg-overlay {
    background: transparent !important;
}

 

Worked like a charm, thank you! Is there any way to lower the opacity of these photos too? 

4 hours ago, ckivland said:

Worked like a charm, thank you! Is there any way to lower the opacity of these photos too? 

.portfolio-hover-bg-overlay {
    background: rgba(0,0,0,0.1) !important;
}

0.1 is opacity

(0 to 1)

I recently tried this, and it just changed the background of the photo from a png checkerboard to solid white, any tips for 7.1?

On 1/18/2022 at 10:31 AM, maya5110 said:

I recently tried this, and it just changed the background of the photo from a png checkerboard to solid white, any tips for 7.1?

What is site url? We can check easier

@tuanphan I have a similar portfolio in hover:cursor mode. I'd like to reduce the opacity and/or add a filter to the images that display on hover.  Any ideas? 

On 3/11/2023 at 4:40 AM, ReformDesign said:

@tuanphan I have a similar portfolio in hover:cursor mode. I'd like to reduce the opacity and/or add a filter to the images that display on hover.  Any ideas? 

Can you share link to portfolio page?

On 3/12/2023 at 5:56 AM, tuanphan said:

Can you share link to portfolio page?

fiddle-elephant-gya2.squarespace.com

PW: reform

@tuanphan

On 4/12/2023 at 1:52 AM, ReformDesign said:

fiddle-elephant-gya2.squarespace.com

PW: reform

You mean this?

On 4/15/2023 at 7:48 AM, tuanphan said:

You mean this?

Yes, those photos. 

Add to Design > Custom CSS

.portfolio-hover-wrapper div {
    filter: grayscale(1);
}