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

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


willhowe

Question

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 post
  • Answers 26
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 HT

@tuanphan Done. I've managed to get it to cover the image so now I'm figuring out: How to center text vertically. How to now set this to only appear on hover. Any advice or tips

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

Posted Images

Recommended Posts

  • 1

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 post
  • 0
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?

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

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

Link to post
  • 0

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

Link to post
  • 0

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.

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

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

@John1490 Would you be able to go through how you achieved this? Afraid i'm new to all this but this is exactly what i'm trying to achieve. Thanks.

Edited by JasonNash
Link to post
  • 0
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 post
  • 0
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?

Link to post
  • 0
On 2/1/2020 at 1:41 PM, tuanphan said:

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

 

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!

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

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

Link to post
  • 0

hello - I have the hover working (thank you Tuanphan!) I would like to get the caption/name to appear on the image when you hover, can you advise? Site is https://bulldog-parrot-grdc.squarespace.com/config/pages Password: Strata!1    - see bottom of Team page. Portfolio worked great for my needs but didn't realize there was a portfolio item limit and need to make something similar but for 60+ people

Edited by Strata
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...