Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 14

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.

Link to comment
  • Answers 50
  • Created
  • Last Reply

Recommended Posts

So, I was able to finally get this looking the way I wanted.

Check it out here to see if this is what you are aiming for:


I started by creating hidden (not-linked) galleries for each "category" or photo that you see at the top of the page. I then created another not-linked gallery for each of the "cover photos" that I would then add to my homepage as a grid gallery block. I put a title for each of the images, which would eventually become the scroll-over text. I then linked each of the images as a "click-through" to the gallery or content page I wanted it to link to. I did this on the 2nd tab (Options) of the individual image editor in the original (source) gallery that is hidden.

After I had set all that up behind the scenes, I then added the below in to the Custom CSS in the settings (paintbrush) editor mode.

I am by no means a CSS-wiz, and I am just learning/faking it myself, but this took me a while to get to and worked for me, so helpfully it will come of use to someone else, as well!

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
 display: block;
 position: relative;
 background-color: rgba(255,255,255,0.9);
 z-index: 9999;
 top: -18px;
 margin-bottom: -18px;
 opacity: 0;
 -webkit-transition: all 300ms ease-out;  
 -moz-transition: all 300ms ease-out;  
 -o-transition: all 300ms ease-out;  
 -ms-transition: all 300ms ease-out;  
 transition: all 300ms ease-out;
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
 opacity: 1; 

.sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor img {
opacity: 1;
transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
.sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor:hover {
opacity: 0.3;
transition: opacity 0.2s ease-in-out;

Hope this helps! Best of luck,bri

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

Hi @promptcollective! After trying loads of different options, this was the only one that worked - so thanks!

Quick question... as you have used numerical values for the position pasted below: (top: -150px; margin-bottom: -15px; )

...it's only centred when the window is viewed in one specific size. if you stretch the window, the text is then in the bottom third of the image. Is there a way to set it to be centred over the image absolutely, no matter what break point it's viewed at?

This might be obvious, I'm new to CSS so apologies in advance if so. :)...

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

Hi @Mikko Not sure if this is of any use to you but I believe this doesn't work with EVERY template. I am using Boutique and it definitely works on that one. I just put the CSS in the style sectionand the descriptions appear underneath.

It might be worth trying it on a different template if the hover is an absolute necessity for your site (which it was for me). I do realise this may not be an option if you need one particular template though.

I'm really sorry I couldn't be of further help but unfortunately I'm an absolute beginner with regards to CSS.

Link to comment

@mrneilsmith deleted all of his answers and comments, and from his account page he says this “I stopped using SquareSpace ages ago. It's probably not worth emailing me directly with questions!”

I’ve reposted his answer to this question.

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment

Thank you for replying @Debstcc. Im using the Adirondack template. Actually I would need the text to appear on overlay of the thumbnail (not below or top of it). Thanks for trying to help. :) Maybe this guy @mrneilsmith would know how to do it. If he is still willing to help us (me) out. ;)

Link to comment

Originally posted by @mrneilsmith, answer retrieved from the Internet Archive Wayback Machine, November 5, 2013

Hi @Debstcc, I know we've dealt with this, but I thought I'd post the answer you used on your original question so anyone searching for an answer will see it.

This displays the Title underneath (or :after) the image. If you wanted it to be the Description you would change the (data-title) part to (data-description).

/* This displays the Title */
.sqs-gallery-design-grid-slide:hover :after {
 font-family: arial, sans-serif;
 font-size: 14px;
 display: block;
 text-align: center;
/* This make the gap between the images a little bit bigger */
.sqs-gallery-block-grid .sqs-gallery-design-grid-slide .margin-wrapper {
 margin-bottom: 30px !important;

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

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