Jump to content

How do add basic overlay/hover on Gallery block items on 7.1 (currently bare)

Recommended Posts

Site URL: https://mwejps3lrkma.squarespace.com

Currently on 7.1 the Gallery blocks with links have no hover/interaction on them, so it's quite hard for users to tell they're clickable links. (example: https://mwejps3lrkma.squarespace.com)

How easy is it to customise it so that we get a basic hover effect? Even a token 10% opacity on hover? Or even better display the 'Alt' text in the centre to match the styling on the Portfolio gallery blocks (example: https://mwejps3lrkma.squarespace.com/)

I thought something like the below would be a quick fix but it doesn't seem to work;

.gallery-grid-item img:hover {
  opacity: 0.9 !important;
}

 

Link to comment
  • 3 months later...
1 hour ago, Kwamzilla said:

Any idea how to add the caption/alt text?

OR change color of the overlay?

Can you share link to gallery page?

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

Sure

https://ruby-recorder-wp9w.squarespace.com/?password=letsconnect

There are a few galleries on the page atm, since I'm having a fiddle, but it's the 3 videos under the H2 "Videos" that I'm focused on atm.

Thanks

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. Some links may be affiliate/referral links.

You can also thank me by buying me a coffee .

Squarespace Tips & Tricks: @squareskills (Youtube 📺 Tutorials - Resource site coming soon)

Link to comment
4 minutes ago, Kwamzilla said:

Sure

https://ruby-recorder-wp9w.squarespace.com/?password=letsconnect

There are a few galleries on the page atm, since I'm having a fiddle, but it's the 3 videos under the H2 "Videos" that I'm focused on atm.

Thanks

https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two/

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

Thanks bud... Still gotta figure out how to make the caption & overlay fade in on hover but this is a big step forward.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. Some links may be affiliate/referral links.

You can also thank me by buying me a coffee .

Squarespace Tips & Tricks: @squareskills (Youtube 📺 Tutorials - Resource site coming soon)

Link to comment
29 minutes ago, Kwamzilla said:

Thanks bud... Still gotta figure out how to make the caption & overlay fade in on hover but this is a big step forward.

Add caption first, then we can check the code to create overlay effect

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

@tuanphan

Done. I've managed to get it to cover the image so now I'm figuring out:

  1. How to center text vertically.
  2. How to now set this to only appear on hover.

Any advice or tips is greatly appreciated.

 

EDIT: Have taken it off, for the moment, as it's driving me crazy and I may have to just use Image blocks with rollover gradient on desktop and a carousel on mobile as a work around for now. Thanks for your help. If you get time and think you can help some more, would really appreciate giving it another go.

Edited by Kwamzilla

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. Some links may be affiliate/referral links.

You can also thank me by buying me a coffee .

Squarespace Tips & Tricks: @squareskills (Youtube 📺 Tutorials - Resource site coming soon)

Link to comment
On 5/8/2020 at 10:01 PM, Kwamzilla said:

@tuanphan

Done. I've managed to get it to cover the image so now I'm figuring out:

  1. How to center text vertically.
  2. How to now set this to only appear on hover.

Any advice or tips is greatly appreciated.

 

EDIT: Have taken it off, for the moment, as it's driving me crazy and I may have to just use Image blocks with rollover gradient on desktop and a carousel on mobile as a work around for now. Thanks for your help. If you get time and think you can help some more, would really appreciate giving it another go.

Have you solved yet?

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

Sadly not. The client also changed their mind and so now I'm not trying as earnestly to solve it as the immediate incentive is gone. It's still something on my radar so will post if/when I do.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. Some links may be affiliate/referral links.

You can also thank me by buying me a coffee .

Squarespace Tips & Tricks: @squareskills (Youtube 📺 Tutorials - Resource site coming soon)

Link to comment
6 hours ago, Charlie1 said:

@tuanphan

Can we get the CSS to do this on a regular image block in 7.1? 

Yes. You can. Can you share link to page where you inserted image blocks?

There has some similar effect: https://beaverhero.com/squarespace-templates-image-boxes/

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
  • 2 months later...

Hey all.  if you have a gallery block in 7.1, I have managed to make the caption overlay the image quite successfully, whilst having hover effects applied aswell.  The easiest way to do this is add HTML text to the caption itself.  This allows you to have much more control over the text and font without the need to apply 100 lines of CSS.  

Images attached are of my new website.  You can see the text overlay and on the second image, you can see the hover effect.  This was all done using simple CSS.  If you want text to appear and rise perhaps on hover, that once again is extremely simple by using simple CSS to place the text below the images & set opacity to 0.  Then on image hover, you set opacity to 100 & have a transition timer to ensure it looks seamless with the rise time.  

If you need CSS help, id be happy to send across.

 

Goodluck and hope this helps. 

Screenshot 2020-08-06 at 10.25.21.png

Screenshot 2020-08-06 at 10.25.10.png

Link to comment
  • 5 weeks later...
On 2/1/2020 at 7:41 AM, tuanphan said:

figure.gallery-grid-item.has-clickthrough:hover {
    opacity: 0.5;
}

 

Hi I tried using this to create a hover state for my gallery images, but nothing is happening. Thoughts on why it's not working? Thanks!
https://hypersphere-seal-aag2.squarespace.com/

Link to comment
On 8/6/2020 at 10:28 AM, John1490 said:

Hey all.  if you have a gallery block in 7.1, I have managed to make the caption overlay the image quite successfully, whilst having hover effects applied aswell.  The easiest way to do this is add HTML text to the caption itself.  This allows you to have much more control over the text and font without the need to apply 100 lines of CSS.  

Images attached are of my new website.  You can see the text overlay and on the second image, you can see the hover effect.  This was all done using simple CSS.  If you want text to appear and rise perhaps on hover, that once again is extremely simple by using simple CSS to place the text below the images & set opacity to 0.  Then on image hover, you set opacity to 100 & have a transition timer to ensure it looks seamless with the rise time.  

If you need CSS help, id be happy to send across.

 

Goodluck and hope this helps. 

Screenshot 2020-08-06 at 10.25.21.png

Screenshot 2020-08-06 at 10.25.10.png

Hi - Have you got a step-by-step how this was achieved? Its exactly what i'm hoping to achieve. many thanks

Link to comment
On 9/13/2020 at 4:09 PM, JasonNash said:

Hi - Have you got a step-by-step how this was achieved? Its exactly what i'm hoping to achieve. many thanks

Have you solved yet?

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
  • 2 weeks later...
13 hours ago, Livia_Sole said:

I've tried to use this with no luck. Any idea why this might be the case? I have a gallery block with a Grid design layout. Thanks much!

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
  • 2 weeks later...
On 10/9/2020 at 3:13 AM, cavemancrayon said:

Howdy! Also curious how to get this to work on the gallery on my homepage. Site is cavemancrayon.com

I see you solved. Do you still need help?

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.