Jump to content

Trying to get hover with Gallery Section

Recommended Posts

Site URL: https://bison-penguin-5adw.squarespace.com/work-livevisuals

I'm hoping there's someone that can help me out with this. I've done some searching and I was able to get the hover animation to happen and darken the image but the description/name wasn't showing up and it kind of killed the clickable links. 

I've got a portfolio page with a gallery section using the masonry setting. I would love to be able to have the image darken and have the description fade up as they are hovered over so we can see each project. 

I've also tried making a blog page with a gallery block but it looks like hover isn't supported with masonry, only slideshow which would change the design too much.

I've contacted a few people about it and I haven't had much luck so I figured I'd make a quick post and see if there's any links or idea anyone could share. 

Edited by blkrcat
remove password
Link to comment
On 11/17/2021 at 9:54 PM, blkrcat said:

Site URL: https://bison-penguin-5adw.squarespace.com/work-livevisuals

I'm hoping there's someone that can help me out with this. I've done some searching and I was able to get the hover animation to happen and darken the image but the description/name wasn't showing up and it kind of killed the clickable links. 

I've got a portfolio page with a gallery section using the masonry setting. I would love to be able to have the image darken and have the description fade up as they are hovered over so we can see each project. 

I've also tried making a blog page with a gallery block but it looks like hover isn't supported with masonry, only slideshow which would change the design too much.

I've contacted a few people about it and I haven't had much luck so I figured I'd make a quick post and see if there's any links or idea anyone could share. 

pass:wove

Hi @blkrcat,

Thanks to solution of @tuanphan, you can try the codes in the following post

I 've tried testing with your page and it seems working properly (currently your mansory has no description, so i can only find the overlay background)

Hope it can help you

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
24 minutes ago, bangank36 said:

Hi @blkrcat,

Thanks to solution of @tuanphan, you can try the codes in the following post

I 've tried testing with your page and it seems working properly (currently your mansory has no description, so i can only find the overlay background)

Hope it can help you

Thank you! yes this works and I've got it working. Only thing I don't know is how to get the text size a bit bigger. I've managed to find most parameters to tweak the color and speed but for some reason I can't find a text size.

Link to comment
On 11/19/2021 at 11:06 PM, blkrcat said:

Thank you! yes this works and I've got it working. Only thing I don't know is how to get the text size a bit bigger. I've managed to find most parameters to tweak the color and speed but for some reason I can't find a text size.

Use this code for text size

.gallery-caption p.gallery-caption-content {
    font-size: 30px;
}

 

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

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.