Hover text on summary grid image

Hi, I am looking to achieve a hover effect for my blog summary (grid), with the excerpt showing on the image on hover. The title will be shown as normal below the image, but I would like the excerpt to show on hover. Can someone help me with this? 

Hi. Can you share link to page where you use summary? We can check easier

On 5/24/2021 at 12:09 PM, tuanphan said:

Hi. Can you share link to page where you use summary? We can check easier

The site is not online yet, so can't give you a link. It's a normal summary block though.

On 6/2/2021 at 7:14 PM, charlineca said:

The site is not online yet, so can't give you a link. It's a normal summary block though.

You can setup password & share url

On 6/3/2021 at 4:48 PM, tuanphan said:

You can setup password & share url

https://www.herclimate.co.uk/ , PW is herclimate

3 hours ago, charlineca said:

https://www.herclimate.co.uk/ , PW is herclimate

Hi. You mean this summary?

Initial: Show image

Hover: Show title,excert, category over image + overlay color

Is this right?

1 hour ago, tuanphan said:

Hi. You mean this summary?

Initial: Show image

Hover: Show title,excert, category over image + overlay color

Is this right?

I want the title and category to show below as is now, and only the excerpt upon hover.

Add to Design > Custom CSS

/* Home summary */
body.homepage .summary-excerpt {
    visibility: hidden;
}
body.homepage .summary-item:hover .summary-excerpt {
    visibility: visible;
}