Help with custom CSS to match example

Hi, I am currently building my site using the Sonora template and want to achieve this rollover animation effect and linked navigation on my gallery poster images. I assume it will need custom CSS as I haven't been able to figure it out in the standard edit options.

https://mainframe.co.uk/portfolio

As you can see initially the images display and then when the cursor rolls over an image, it activates a trans black image overlay to fade up and the title, subtile and navigation buttons animate on.  The View Project  link  takes you to a "Not Linked" index page and the Quick Look link plays a video in a lightbox.

So far I have made it visually similar, on mine the View Project and Quick Look are part of my subtitle and I then highlighted the View Project and added a link to the text to a non linked index page, which works but maybe not the correct way to do it (See image attached - I don't want the underline on the link) . As yet I have no link on the Quick look text . I am not sure if this is how the example on the Mainframe website is done, I think theirs uses buttons?

Any help to match the mainframe example would be greatly appreciated.

Thanks

Hi,

What is your site url? We can help easier.

With example site: https://mainframe.co.uk/portfolio

I see they used Image Block with Image caption and some CSS to achieve this. With click link open video lightbox, I think they used a lightbox plugin.

Hi my site is

https://kangaroo-grey-8tpr.squarespace.com/config/pages

Does that work?

Thanks for all your help