Jump to content

CSS for hovering text on poster images

Recommended Posts

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. 
 

Screenshot 2022-10-24 at 12.08.11 PM.png

Edited by ywong
removed reference website for their privacy.
Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

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 . 

Link to comment

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.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.