Jump to content

How do I create a text rollover on my gallery thumbnails?

Recommended Posts

I have a gallery grid and am wanting to find a way of being able to hover over each thumbnail and it shows an id number for each picture. It shows the ID number on the rollover when I click and the lightbox enlarges the image, but ideally would like it to show on the gallery thumbnails also using hover. I'm not looking for anything fancy, just two words of text to show over each picture when hovering.

I have NO experience with CSS (but am happy to give it a try!) so if anyone can help, please make it as simple as you can :)

Could you also please let me know if the code would ALL go into the Style section of CSS.

It would have been great if there was somewhere we could give a title to the images and it would show up perhaps under each photo in the grid, but unfortunately I've been told this isn't possible at the moment.I've been trying to work this out for 3 days now and would be very grateful for any help at all.Thanks for your time.

Link to comment
  • Replies 50
  • Views 41.1k
  • Created
  • Last Reply

Just spotted that Mikko kindly shared the CSS for a hover used on their gallery.

.sqs-gallery-design-grid-slide:hover { background-image: url(----); background-size: 100% 100% !important; }.sqs-block-content .image-slide-anchor:hover img { display: none; }

Is it a case of replacing the background image url with the css that tells it to read the image title of each pic, so you then get a text hover instead of an image change?

Have tried to learn some CSS to try and change the above coding so it works for my gallery, but I'm not having much luck unfortunately.

Link to comment

Just wanted to add that as I'm working on my site and it's all over the place at the min, have had to take it back off public view. If you (or anyone that can help) specifically needs to see the gallery to help with this coding, please let me know and am happy to make it public again :) Thanks

Link to comment

Hi, thanks for posting your answer. Silly question but where does this code go? I put it in Page Setup/Advance but that doesn't work.


Link to comment

another solution for me is, when rollover, the image change. (in this case i can go to photoshop and writte the title in the "over" image)...this is even better i think.

(just see your answer..thanks or the help after all)

Link to comment

Commenting again because I see that my comments are appearing blank - not sure why.

I am using a grid gallery and the code you nicely shared does is not working for my template. Could you please take a look at mine - http//www.mylifeinblogyears.com


Link to comment

when i writte some url i got a blank comment too... hope that mrneilsmith could help us in this...im trying to find how can adapt the code for montauk template. i think that is a gallery grid too because each project is a single gallery with a thumbnail.

Link to comment

I'm having this exact same issue getting text to appear on Gallery - Grid like everyone else. It allows you to input text to each image but the text (title) or (description) doesn't appear like it does for the Slideshow.

I tried using the above CSS but it didn't work for me either. Looking at the code (browser dev tools) it appears the HTML/CSS code is in there to display the text but it just isn't working.

If anyone can provide a fix either via CSS or from Squarespace itself that would be VERY welcome.

Link to my gallery http://everydaydigitals.com/test

Link to comment

@mrneilsmith Sorry about that. I was banging my head all last night trying to figure out a solution myself and forgot to convert the Test page back. I did check my homepage and the title/description were on the images. Not sure why they aren't showing up in the code.

To answer your theory, my Test page was a new page that I only added the grid gallery to just to experiment with. Hmm...not sure but this is stomping me.

Thank you so much for all of you help. I love your site BTW. Tried to figure out how you did your slideshow hover/opacity to no avail. Perhaps it is a template issue.

Link to comment

@mrneilsmith I am assuming the template I selected does not include them in the code as I do have a title and description for each image. Thank you for all of your help. It would be nice if SS eventually gave us the option of customizing each gallery block, then we wouldn't have to struggle finding a way for this to work.

Link to comment


This topic is now archived and is closed to further replies.

  • 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.