CSS for hovering text on poster images

Hi,

I am currently building a portfolio page for my cinematography work. I would like to have a cover page with an image of each project and when you hover over the image, the title of project appears with a lightbox and it can clickthrough to another page about the project itself.


* In the example image, I want the title 'CITY OF WOE' to only display when a mouse hovers over it instead of just appearing the whole time. 

I was also wondering how you could make the images full bleed without any spaces or gaps in between each image?

Thanks in advance. 
 

Can you share your website URL and site wide password?

You should be able to do this with a portfolio page:
https://support.squarespace.com/hc/en-us/articles/360035611791-Portfolio-pages

My website url is yilinwong.com and dont have a site wide password I believe. 

I've tried with the portfolio page, but it doesn't give me an option to display projects with 1 column on the 'Grid Overlay' layout. As the page is for cinematography work, I would like to display each project on a full wide if possible. Is that possible through CSS? 

Thank you . 

How many work examples will you have? If it's not many, then forgoing the portfolio page and just having pages for the work, and a front page where you use images with an text block on top (if you're using Fluid Engine) or a poster block if you're using the Classic Editor. You can then have the text show on hover with some CSS.

Yes, I am looking for a CSS code that can help me create this feature. 

If you set up the page as suggested, I can provide some CSS to achieve the effect you're going for.