Adding hover overlay to portfolio grid

Site URL: https://mouse-trout-epjy.squarespace.com/members

Hello, 

I am trying to add a blue overlay on hover to the images in a portfolio grid. 

On Members page, you can see I've added a grid of images with a working blue overlay on hover using the following code: 

.layout-caption-overlay-hover .image-caption-wrapper {
  background-color:#66C8F0!important; 
  opacity: 0.6!important; 
  min-height:100%; 
  top:0!important;
}  

 .layout-caption-overlay-hover .image-caption-wrapper, .layout-caption-overlay-hover .image-caption-wrapper
{
  color: transparent;
}

Below the contact form you will find another grid with a handful of projects - this is the portfolio grid.

The client would like to be able to add the individual members pages as portfolio projects - so I am trying to code the portfolio grid images to have overlay on hover - am I right in saying this isn't possible because they can't inherit the caption overlay? 

site password: spong123 

Hi. I see you solved?

No I haven't - I've only got it working on the top grid. The bottom grid (below the contact form - see screenshot) isn't working. 

Use this code for portfolio grid. Add to Home > design > Custom CSS

body#collection-5f36ab9a298ac83b74270322 {
.grid-item:hover .grid-image-inner-wrapper:after {
    background: rgba(102,200,240,0.6) !important;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
}

Ahh I forgot to tag the collection ID! Thank you, that worked perfectly. 

Hello, how do i do the same but making the image in the portfolio grid greyscale first and then colour? 

4 minutes ago, MDaley said:

Hello, how do i do the same but making the image in the portfolio grid greyscale first and then colour? 

This is what i have so far. Please help.

body#block-5fbedffd1972c46e3c881180 {
  .grid-item-filter: grayscale(100%);
  filter: grayscale(100%);
  &:hover, &:focus {
    .grid-item-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}
}

On 11/27/2020 at 9:15 PM, MDaley said:

This is what i have so far. Please help.

body#block-5fbedffd1972c46e3c881180 {
  .grid-item-filter: grayscale(100%);
  filter: grayscale(100%);
  &:hover, &:focus {
    .grid-item-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}
}

Can you share link to portfolio page? We can check easier