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

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.

Hi there,

Happy to help out... Can you send me the link of the gallery you are working on so I can have a look and write some custom CSS for you?

Are you using Squarespace 5 or 6?

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.

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

Hi there... Sorry for the delayed response. Yes if you could email me with an access code to see your site that would be great, then I can work with the above code to customise it for your gallery! :)

Another thread with the same topic I am trying to solve. If anyone gets this to work then please let me know! I would appreciate help too :)

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.

Thanks!

NM, it goes in the site's CSS! Thanks so much, this is so incredibly helpful!

Can someone post the same code but for montauk theme?(css nob here)

i try it but don't work... maybe is not called ".sqs-gallery-design-grid-slide"? (super nob, dont even know what im saying)

yes, locomotiva.pt/work

I tried too and it did not work.

http://www.mylifeinblogyears.com/

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)

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

Cheers

I see. Do you have any other suggestions for getting the code to work on the Five template? I have tried using your code and it does not seem to work for me.

I have tried leaving three different comments here and they are all appearing blank. I am really getting frustrated with this.

test test test

mylifeinblogyears

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.

@mrneilsmith The link to my site is www.mylifeinblogyears.com

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

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

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

Any way this code can be modified to have the text hover directly on the center of the image like this one here?

@xmacvicar did you get the above code to work for you? If so, can you show us exactly what you code looks like?

Thanks