Hover element stroke on gallery picture + padding/color correction on description text under

Hi,

I've made a "Latest work" gallery (grid:simple) block on my home page.
I'd like each image link to have a "hover" property like on my portfolio pages.

Current layout: hover does nothing different and text description padding is too low on image.

After changes:
1. padding on description text is closer up on image
2. Description text is this color #656565
3. Hover over stroke color #42c6ff + 5px stroke + image 20% bigger like in portfolio pages (motion/design/illustration)

Desired look:

Web:
https://ellipse-teal-dl5w.squarespace.com/

Pass: 3

Cheers,

Mac

Hi,

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

https://ellipse-teal-dl5w.squarespace.com/illustration

Sure here's the link thanks.

Here's the css code I applied to the portfolio pages also to get stroke border:
 

/*PORTFOLIO HOVER_________________*/

/* Show stroke border overlay on hover */
.grid-image {
    opacity: 1 !important;
    position: relative;
}

.grid-image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 5px solid rgba(66,198,255,0.8); /* change border color here */
    transition: all 0.3s;
    opacity: 0;
    box-sizing: border-box;
}

.grid-item:hover .grid-image:after {
    opacity: 1;
    transition: all 0.3s;
}

/*PORTFOLIO HOVER END______________*/
//-----------------------------------

thank you works lovely! have a good one! :)