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

  • 3

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

Edited by bri nicole

Share this post


Link to post
  • 5

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

Share this post


Link to post
  • 2

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


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.

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 1

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

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?

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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)

Edited by locomotiva

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

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