Jump to content

Gallery Page with Images - Custom Hover + Titles

Recommended Posts

Hi all,

I want to customize a Gallery page with images. I have seen a few posts on customization and can't get it to work when combining the code together.

My Goals:

  • Custom Titles/Caption Per Image (Centered)
  • Custom Image Hover with Title + Image Fade or GIF
  • Lightbox Plug-in for Vimeo Link

I got some code working that was posted by @tuanphan here for a portfolio page of different projects and would like to do the same for a gallery page of images. The only thing missing from this example is the custom titles in the center.

My Site: www.cuttingboard.tv

Password: rgb422YUV1234!

Thank you so much!

Edited by kakejeller
Link to comment
  • kakejeller changed the title to Gallery Page with Images - Custom Hover + Titles
  • Replies 3
  • Views 732
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Hi @tuanphan,

The password is fixed now.

site: www.cuttingboard.tv

password: rgb422YUV1234!

I was able to get most of the code working together after digging around more and more.

I want to customize the font used to be:

  • Font: Poppins
  • Weight: 400
  • Text Transform: Uppercase
  • Alignment: Center

I'm using the Video Lightbox Button plug-in.

For mobile, I would like the grid formatting to be one column only. Thank you!

Link to comment

You can use this to Custom CSS box

.gallery-caption p.gallery-caption-content {
    font-family: 'Poppins' !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
}

Also, it already show one column to me

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.