Opaque Portfolio Grid Overlay on Hover

Site URL: https://www.annawasson.com/

As you can see on my site, when you hover over each portfolio image on the portfolio grid, there is a transparent black overlay with the caption. I have been tinkering with custom CSS to make the overlay a solid color (light blue) with the caption when you hover over it, but I can't seem to make the opacity completely opaque on hover. Let me know if this is possible.

.portfolio-grid-overlay .portfolio-overlay {
    background-color: #fff !important;
}

Hi, I have the same question but when I tried this it does not change the opacity, only the color. Adding "opacity: 1" seems to change the opacity for the entire block of images at once, not just the one I'm hovering over...any ideas?

On 3/1/2021 at 10:44 AM, sgreenspan24 said:

Hi, I have the same question but when I tried this it does not change the opacity, only the color. Adding "opacity: 1" seems to change the opacity for the entire block of images at once, not just the one I'm hovering over...any ideas?

Add to Design > Custom CSS

.portfolio-grid-overlay .portfolio-overlay {
    background-color: rgba(255,255,255,0.9) !important;
}

0.9 is opacity (0 >> 1)

Squarespace has this feature built in. You can control the opacity within the Edit Section panel for the particular section. No need to insert custom CSS. 

1. Edit Section

2. Under the Format tab scroll to the bottom and the last setting option is to control the opacity of the overlay.