Custom hover animation for projects on portfolio gallery page

Hi there. 

So I would like to use custom CSS to add a little scale-up animation to the title and feature image when I hover over portfolio projects.

Currently, I have managed to code it so that the text scales up when I hover over the text but I would like it to do so when I hover over the project image/overlay as a whole - not just when I hover over the ".portfolio-title". This is the code driving the current animation. I am happy with the easing. 

//--- SCALE PORTFOLIO TEXT ---//
h3.portfolio-title  { transition: all 1s cubic-bezier(0,.2,0,1)
}
.portfolio-title:hover  { transform: scale(1.05);
}

How would I also get this same effect on the portfolio image too? I would like to have control of this too. 

https://ryz-2023.squarespace.com/work
PW: test

Thanks!

Hello. Hoping someone can answer this. Thanks!

On 4/4/2023 at 9:16 PM, tuanphan said:

Change to this code

//--- SCALE PORTFOLIO TEXT ---//
h3.portfolio-title  { 
transition: all 1s cubic-bezier(0,.2,0,1);
}
a.grid-item:hover .portfolio-title  { 
    transform: scale(1.05);
}

 

That fixed it. Thank you Tuanphan!