- Hover images on portfolio page as flat soild colour

Site URL: https://falodu-demo.squarespace.com/work

Hi, I'm quite new to Squarespace and I have a question regarding the hover state on the images of a portfolio page in Squarespace 7.1 .
I'm currently working with this template: https://falodu-demo.squarespace.com/work and I was wondering if the hover state on the portfolio page (in this case work) can be a solid colour instead of the current 'faded' effect. I have looked everywhere on the design section but it seems it might have to be edited in the custom CSS.

On 7/17/2020 at 9:36 PM, GHG said:

Site URL: https://falodu-demo.squarespace.com/work

Hi, I'm quite new to Squarespace and I have a question regarding the hover state on the images of a portfolio page in Squarespace 7.1 .
I'm currently working with this template: https://falodu-demo.squarespace.com/work and I was wondering if the hover state on the portfolio page (in this case work) can be a solid colour instead of the current 'faded' effect. I have looked everywhere on the design section but it seems it might have to be edited in the custom CSS.

Hi there

You can try inject this into Settings -> Custom Css

.grid-item .grid-image-inner-wrapper {
    position: relative;
}

.grid-item .grid-image-inner-wrapper:after {
    content: "";
    transition: opacity 0.5s;
    opacity: 0;
}

.grid-item:hover .grid-image-inner-wrapper:after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: "";
    background: #4CAF50;
    opacity: 0.7;
}

.no-touch .portfolio-grid-basic .grid-item:hover .grid-image {
    opacity: 1;
}

Oh wow, thank you thank you thank you so much, you absolutely solved it for me 🙂
thousands times thank you