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

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

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

Thanks tuanphan, that worked a treat 

Any idea how to add the caption/alt text?

OR change color of the overlay?

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?

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

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/

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

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

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

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?

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.

@tuanphan

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

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/

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. 

Yoo! I just added this plugin today. 🙂 

Working on adding many more daily. More hover effects coming soon.  

https://www.squarelemons.com/plugins/p/gallery-grid-hover-effect

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/

1 hour ago, alstrauss said:

I tried using this to create a hover state for my gallery images, but nothing is happening. Thoughts on why it's not working?

Please set up a site-wide password so we can take a look at your site.

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

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. 

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

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?

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!

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.

On 2/1/2020 at 5:41 AM, tuanphan said:

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

 

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

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?