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

No I couldn't get it to work…I put the code in and nothing really happened

Could someone please let us know how to get this code working!? I would also need this. I also put it in the css panel and it's not working. Nothing happens.

I so need this too!! Anyone know?

Would also love to know how to have captions over the image

Anybody!?! HELP US PLEASE !!! + !!! = !!!!!!

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.

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

@mrneilsmithHelp us please. :)

Would love to get this to work in flatiron!... need descriptions for some of my images in gallery :-/

Hi mrneilsmith, Your code is working great on my thumbnails, however any that are in landscape mode the titles do not come up. Any idea how to work around this? I tried cropping them all square but then none of the titles show up. Hmmm What to do? Thanks

Hi mrneilsmith, Your code is working great on my thumbnails, however any that are in landscape mode the titles do not come up. Any idea how to work around this? I tried cropping them all square but then none of the titles show up. Hmmm What to do? Thanks

Is it me or is there NO code in this thread? Reading the comments, there seem like there is an answer somewhere here (by "mrneilsmith") but why do I not see it?

Have some posts been deleted?

Here's a custom CSS solution that worked for me. Just a few lines to paste into the custom css, and it has a nice animation fade in out effect too. Check it out.

http://answers.squarespace.com/questions/990/display-image-titles-under-gallery-grid-thumbnails/36373

hello all,

i took the custom css mentioned above and modified it so 1) the gallery title would display over the image and have no background color and 2) be styled like other headers I have on the site. it took some hacking, so please excuse the shotty css and feel free to correct as needed. Please note: the specific pixels called out works for the font I am using and will need to be adjusted accordingly (didn't try to see if % worked).

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
display: block;
position: relative;
top: -165px;
text-align: center;
opacity: 0;
background-color: transparent;
margin-bottom: 15px; 
-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 {
display: block;
opacity: 50; 
background-color: none;
text-align: center;
width: 100%;
}
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
font-family: Questrial;
font-size: 32px;
color: #fff;
text-transform: uppercase;
}
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
font-family: Questrial;
font-size: 32px;
color: #fff;
text-transform: uppercase;
}

@media only screen and (max-width: 1024px) {
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { opacity: 50; }
}

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

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 {
 content:attr(data-title);
 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;
}

Is there a part of this code you can leave out so the text appears overlaid on the image at all times, not just on the hover?

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:

www.thearrangementco.com

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

I posted an answer to a similar question here. I provided code for changing the opacity of gallery grid images upon hover while also displaying the image title centered and at full opacity on hover.

To see a sample of my code in use, check out my site.

Hello Everyone! I put together a comprehensive guide on how add hover effects to your images

We cover:

• Fade Effect
• Grow Effect
• Invert Colors Effect

Check it out here

FORTE TEMPLATE: I've modified the code a little bit to make it work exactly as I wanted: Hover + text in the middle + whole clickable area. The code was first provided by notalenbattle, I just did little tweaks. Thank you.

body.collection-type-index .color-weight-dark #logo img { -webkit-filter: invert(100%); filter: invert(100%); }

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
font-family: Questrial;
font-size: 32px;
color: #000000;
text-transform: uppercase;
}
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
font-family: Questrial;
font-size: 32px;
color: #000000;
text-transform: uppercase;
}
@media only screen and (max-width: 1024px) {
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { opacity: 50; }
}
.sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor {
 opacity: .1;
 -webkit-transition: opacity .3s ease-in-out;
 transition: opacity .3s ease-in-out;
 -moz-transition: opacity .3s ease-in-out;
 -o-transition: opacity .3s ease-in-out;
 -ms-transition: opacity .3s ease-in-out;
}

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: relative; background-color: rgba(255,255,255,0); z-index: 9999; top: -250px; margin-bottom: -15px; 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 .image-slide-title {
 color: #273845; 
 opacity: 0; 
 text-transform: uppercase; 
 font-size: 18px; 
 line-height: 125%;
 letter-spacing: 2px; 
 margin-bottom: -20px;
}

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
 color: #273845; 
 opacity:1; 
 text-transform: uppercase; 
 vertical-align: middle; 
 font-size: 18px; 
 line-height: 125%;
 letter-spacing: 2px; 
 margin-bottom: -20px;
}

@media only screen and (max-width: 1024px) {
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { 
color: transparent; 
opacity: 0;
}
}

Hi,

Whenever I add this code to the Custom CSS the hovering over the image happens but the title text doesn't.

Has anyone else encountered this problem?

This code was awesome, but the titles have stopped appearing. I'm seeing this comment about titles no longer appearing a lot on various related threads. Does anyone know how to get the titles to appear again? @bri nicole, I noticed this is happening on your site too (which is otherwise an awesome site!!!). :-(

Thanks in advance!

@regalpeach: I'm struggling to get the title to come up. Were you able to fix this for your landscape images?

@morena: I had this problem and someone in another thread said Squarespace changed the settings a bit so you have to select "show title" in the gallery block.