Jump to content

Adding CSS to show Gallery content title on mouse hover

Recommended Posts

Site URL: https://fuchsia-mouse-tr82.squarespace.com/

I'm looking to replicate this site and have the title of each thumbnail appear on mouse hover. 

I've gotten as far as getting the css identifier which is 

.collection-type-gallery #thumbnails .thumb img:hover {
  opacity: 0.5; }

But I'm not quite sure how to pull the title for each clip and format it to be centered over the thumbnails on mouse hover. 

Could someone help me out with this?

Password is: csshelp

Link to comment
  • Replies 2
  • Views 321
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

You don't appear to have added titles/captions to any of the images.

Please add them and we can help.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
7 hours ago, Kwamzilla said:

You don't appear to have added titles/captions to any of the images.

Please add them and we can help.

The title is pulled from the Youtube URL (attached) for each item in the gallery view. I don't have the option to add captions like in a typical gallery - when I hover over the gallery and click edit, it opens up the sidebar where I can only upload the images/videos or access settings.

Not sure if this is a template limitation.

title.png

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.