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

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

Question

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.

Edited by CRM114
retag

Share this post


Link to post

Recommended Posts

  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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


New American Public Art is a multi-disciplinary studio for conceptualizing, designing, fabricating, and installing interactive projects. Making places creative.

Share this post


Link to post
  • 0

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


Hi, my name is Forrest. I am a founding member of [Pareto Design][1]. Addicted to progress, designing better democracy with tech, & driving youth demand for electric vehicles http://goo.gl/hK1WGZ [1]: http://pareto-design.com

Share this post


Link to post
  • 0

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;
}
}




Share this post


Link to post
  • 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?

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...