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

How do I create a hover text over my grid gallery?


sira

Question

16 answers to this question

Recommended Posts

  • 1

You might try copying and pasting this in Design > Custom CSS:


/*
** in gallery grid, set a hover over slide effect to 
** display slide title on partially transparent
** overlay
*/
.sqs-gallery.sqs-gallery-design-grid .slide 
.margin-wrapper .image-slide-title {
 position: absolute;
 bottom: 0;  
 width: 100%;
 height: 0;
 color: white;
 background-color: rgba(194, 194, 163, .8);
 opacity: 0;
 transition: all .25s ease-in;
}
.sqs-gallery.sqs-gallery-design-grid .slide 
.margin-wrapper:hover .image-slide-title {
 height: 40%;
 opacity: .9;
}  

This should give you the effect, on hover over a slide, of a partially transparent overlay sliding up over the image and displaying the slide title.

Let me know whether this works and, if so, whether it's the type of effect you have in mind.

-Steve

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment
  • 0

I have been looking for something like this, thank you! I'm still a newbie to CSS, what about your code makes it slide up from the bottom? What about it can be modified to have it slide in other directions or simply appear or zoom into the overlay?

Also is there a way to maintain the title to the center of the image?

Sorry for the multiple questions, just interested to learn.

Link to comment
  • 0

@adeuitch:

So as not to hijack @sira's question with material not directly responsive to it, if you will pose a separate question of your own and leave a comment here with the question title and url, I will try to help. Try to decide on what effect you want for your site and pose your question as how to get that. Don't forget to give your template name and site url.

As examples of the kind of hover effects that can be achieved, see Hover.css and CSS Image Hover Effects.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment
  • 0

Hey guys. I'm using the Horizon template in Squarespace and I want to have the title hover effect with a desaturation or blur of the photo's title and caption in a gallery block on the individual images on specific pages.

Been trying to figure this out for months and cannot figure it out.

Link to comment
  • 0
On 7/3/2016 at 11:49 PM, alxfyv said:

You might try copying and pasting this in Design > Custom CSS:



 

/*
** in gallery grid, set a hover over slide effect to 
** display slide title on partially transparent
** overlay
*/
.sqs-gallery.sqs-gallery-design-grid .slide 
.margin-wrapper .image-slide-title {
 position: absolute;
 bottom: 0;  
 width: 100%;
 height: 0;
 color: white;
 background-color: rgba(194, 194, 163, .8);
 opacity: 0;
 transition: all .25s ease-in;
}
.sqs-gallery.sqs-gallery-design-grid .slide 
.margin-wrapper:hover .image-slide-title {
 height: 40%;
 opacity: .9;
}  
 

 

This should give you the effect, on hover over a slide, of a partially transparent overlay sliding up over the image and displaying the slide title.

Let me know whether this works and, if so, whether it's the type of effect you have in mind.

-Steve

Hi there Steve, 
Thank you for the code. 
I have it on my website, however I would like to know if it's possible to center the text. 

Regards, 
Lili 

Link to comment
  • 0
On 9/8/2020 at 12:12 PM, sofiawilson said:

I have a similar question, does anyone know how to make the text sit in the box without being cut off? At the moment the bottom on the gs and ys aren't visible 

Can you share link to gallery? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 3/16/2021 at 1:54 PM, MMEbyKiandraTrickett said:

I've put this on the below site. Interested to hear how people have centred the text and wrap? (So the text doesn't go to the top) Tried a couple different CSS add ons and hasn't worked. 

 

www.allnaturalkitchen.com.au PW ENTER

Try this guide.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 2/22/2017 at 9:55 PM, Johnny_A said:

Thanks so much for this! Wondering if there is a simple way to have this effect display the description vs the title (or title and description) within the same context. I'm using the mercer template and this is the first script I've found that works with my site.

Best!

Also wondering this.

I need both the title and description shown on the hover. Basically, the same thing you get when you do slideshow gallery and toggle the hover option.

Link to comment
  • -1

Hi,

Not sure if you're using gallery blocks or gallery pages?

I've developed a commercial plugin that adds grid gallery block titles in front of the image with smooth hover effects. You can add a background color as well.

So if a result like the image below is what you're after, check out the plugin here.

alt text

– Petri / Vox Pop

Edited by voxpopagency
Initial Revision

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...